title: Rendering SVG in React.js
body: <p>I have an svg that I am trying to render in a React.js application. 
  My working code looks like following</p>
  
  <pre><code>import React from 'react';
  
  export default class App extends React.Component{
     render(){
        return(
           &lt;svg
              width="100%"
              height="100%"
              xmlns="http://www.w3.org/2000/svg"
              xmlnsXlink="http://www.w3.org/1999/xlink"
           &gt;
              &lt;defs&gt;
                  &lt;g id="Port"&gt;
                      &lt;circle style={{ fill: "inherit" }} r="10" /&gt;
                  &lt;/g&gt;
              &lt;/defs&gt;
              &lt;use x="10" y="10" xlinkHref="#Port" style={{ fill: "blue" }} /&gt;
           &lt;/svg&gt;
        )
     }
  }
  </code></pre>
  
  <p>However, when I try to render svg from <a href="https://code.highcharts.com/mapdata/custom/africa.svg" rel="nofollow noreferrer">this</a> file then nothing loads.
  I have camel cased <code>stroke-width</code> to <code>strokeWidth</code> and <code>xmlns:xlink</code> to <code>xmlnsXlink</code> but still no luck following <a href="https://stackoverflow.com/questions/23402542/embedding-svg-into-reactjs">this</a> stackoverflow answer.</p>
  
  <p>Am I missing something? </p>
  
  <p>The code that doesn't work:</p>
  
  <pre><code>import React, { Component } from "react";
  
  class App extends Component {
      render() {
          return (
              &lt;svg
                  width="100%"
                  height="100%"
                  xmlns="http://www.w3.org/2000/svg"
                  xmlnsXlink="http://www.w3.org/1999/xlink"
              &gt;
                  &lt;defs&gt;
                      &lt;g id="Port"&gt;
                          &lt;path
                              fill="#CEE3F5"
                              stroke="#6E6E6E"
                              strokeWidth="0.4"
                              id="UG"
                              d="M489.1,343.2 L488.2,343.5 L487.4,342.8 L488.5,342.7 Z M496.1,338.9 L496.5,337.7 L497.6,337.7 L497.3,339.5 Z M484.6,348.5 L484.6,348.4 L484.7,348.5 Z M466.2,344.1 L468.4,341.3 L466.6,340.9 L468.7,335.9 L468.7,333.5 L473.3,329.8 L474.1,331.5 L477.2,327.4 L481.0,324.5 L480.0,322.0 L475.3,319.5 L476.5,315.9 L475.6,314.7 L476.4,310.9 L478.9,308.4 L482.0,309.5 L484.3,308.2 L487.7,310.7 L489.3,308.9 L494.8,307.7 L499.1,308.6 L502.9,304.9 L504.5,308.6 L506.8,309.5 L506.3,311.8 L507.9,315.6 L510.8,319.5 L511.2,326.2 L509.7,329.9 L507.2,331.0 L502.9,338.2 L499.3,338.7 L496.8,337.0 L494.6,339.2 L491.1,339.0 L485.4,341.3 L486.2,342.7 L483.5,346.8 L484.2,348.5 L476.2,348.5 L473.2,349.0 L468.4,352.4 L465.7,351.7 L465.5,347.8 Z"
                          &gt;
                              &lt;desc xmlns="http://www.highcharts.com/svg/namespace"&gt;
                                  &lt;name&gt;Uganda&lt;/name&gt;
                                  &lt;labelrank&gt;3&lt;/labelrank&gt;
                                  &lt;country-abbrev&gt;Uga.&lt;/country-abbrev&gt;
                                  &lt;subregion&gt;Eastern Africa&lt;/subregion&gt;
                                  &lt;region-wb&gt;Sub-Saharan Africa&lt;/region-wb&gt;
                                  &lt;iso-a3&gt;UGA&lt;/iso-a3&gt;
                                  &lt;iso-a2&gt;UG&lt;/iso-a2&gt;
                                  &lt;woe-id&gt;23424974&lt;/woe-id&gt;
                                  &lt;continent&gt;Africa&lt;/continent&gt;
                                  &lt;hc-middle-x&gt;0.59&lt;/hc-middle-x&gt;
                                  &lt;hc-middle-y&gt;0.45&lt;/hc-middle-y&gt;
                                  &lt;hc-key&gt;ug&lt;/hc-key&gt;
                                  &lt;hc-a2&gt;UG&lt;/hc-a2&gt;
                              &lt;/desc&gt;
                          &lt;/path&gt;
                      &lt;/g&gt;
                  &lt;/defs&gt;
                  &lt;use x="10" y="10" xlinkHref="#Port" style={{ fill: "blue" }} /&gt;
              &lt;/svg&gt;
          );
      }
  }
  
  export default App;
  </code></pre>