title: Custom React SVG component not rendering on iOS, renders fine on Desktop
body: <p>I just made this component to avoid having to load SVG images in React.js, I want to draw my own SVG buttons in this case. Unfortunately, the component I wrote works just fine on Mac or PC Desktop (it renders a blue rectangle) but it does not on iPhone or iPad (tried Safari and Chrome, no luck on iOS). Can you help? This is the component I'm testing:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react'
  
  const Svg = (props) =&gt; {
  
      return(
  
          &lt;svg
              viewBox = {`0 0 ${props.width} ${props.height}`}
          &gt;
  
              &lt;defs&gt;
  
                  &lt;path
                      id = 'path-main'
                      d = {`
                      M 0, 0
                      L ${props.width}, 0
                      L ${props.width}, ${props.height}
                      L 0, ${props.height}
                      L 0, 0 z
                      `}
                  /&gt;
  
              &lt;/defs&gt;
  
              &lt;g&gt;
  
                  &lt;use
                      stroke = 'blue'
                      strokeWidth = '2'
                      fill = 'blue'
                      xlinkHref = '#path-main'
                  /&gt;
  
              &lt;/g&gt;
  
          &lt;/svg&gt;
  
      )
  }
  
  export default Svg</code></pre>
  </div>
  </div>
  </p>
  <p>This should be very simple as I haven't done anything special with it yet, I'm just making sure it works across devices and responsively, but alas, it does not. Do you know what I'm missing here? Does iOS not support SVGs drawn in runtime or something?</p>
  <p>By the way, the component is just being called this way (obvious but still):</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;Svg
    width = '300px'
    height = '50px'
  /&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Thanks</p>
  <p>Edit1: for the record, it also does not render on Mac Desktop Safari, just noticed.</p>