title: SVG: fixed font size
body: <p>I have an SVG inlined to html code. Its is scaled to fit width with preserving aspect ratio. Is there a way to set font size fixed to viewport that can be controlled with media queries? </p>
  
  <p><strong>EDIT:</strong>
  The problem is when i set fixed font-size within width range the font is resized anyway relative to svg size.</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-css lang-css prettyprint-override"><code>#svg-container {
    width: 100%;
    padding-bottom: 70%;
    overflow: hidden;
    border: 1px solid red;
  }
  
  #svg-container svg text tspan {
    font-size: 14px;
  }
  
  
  @media (min-height: 800px) {
    #svg-container svg text tspan {
      font-size: 50px;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="svg-container"&gt;
  &lt;svg
     xmlns:dc="http://purl.org/dc/elements/1.1/"
     xmlns:cc="http://creativecommons.org/ns#"
     xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
     xmlns:svg="http://www.w3.org/2000/svg"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
     xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
     version="1.1"
     viewBox="0 0 500 350"
     data-name="Layer 1"
     id="Layer_1"
     inkscape:version="0.91 r13725"
     sodipodi:docname="Desktop_Enhanced.svg"
     width="100%"
     style="position: absolute; left: 0; top: 0;"   
    &gt;
    &lt;sodipodi:namedview
       pagecolor="#ffffff"
       bordercolor="#666666"
       borderopacity="1"
       objecttolerance="10"
       gridtolerance="10"
       guidetolerance="10"
       inkscape:pageopacity="0"
       inkscape:pageshadow="2"
       inkscape:window-width="1280"
       inkscape:window-height="961"
       id="namedview51"
       showgrid="false"
       inkscape:zoom="1.0054235"
       inkscape:cx="231.42799"
       inkscape:cy="361.93137"
       inkscape:window-x="1272"
       inkscape:window-y="-8"
       inkscape:window-maximized="1"
       inkscape:current-layer="Layer_1"
       fit-margin-bottom="150" /&gt;
    &lt;metadata
       id="metadata75"&gt;
      &lt;rdf:RDF&gt;
        &lt;cc:Work
           rdf:about=""&gt;
          &lt;dc:format&gt;image/svg+xml&lt;/dc:format&gt;
          &lt;dc:type
             rdf:resource="http://purl.org/dc/dcmitype/StillImage" /&gt;
          &lt;dc:title&gt;Desktop&lt;/dc:title&gt;
        &lt;/cc:Work&gt;
      &lt;/rdf:RDF&gt;
    &lt;/metadata&gt;
    &lt;defs
       id="defs3"&gt;
      &lt;style
         id="style5"&gt;.cls-1{fill:#da1f26;}.cls-2{fill:#252e43;}.cls-3{fill:#d1d3d4;}&lt;/style&gt;
    &lt;/defs&gt;
    &lt;title
       id="title7"&gt;Desktop&lt;/title&gt;
    &lt;polyline
       id="polyline9"
       points="329.4 62.24 343.54 76.39 329.4 90.53"
       class="cls-1"
       style="fill:#da1f26"
       transform="translate(59.579252,-43.513817)" /&gt;
    &lt;polyline
       id="polyline11"
       points="333.56 328.83 347.7 342.97 333.56 357.11"
       class="cls-2"
       style="fill:#252e43"
       transform="translate(59.579252,-43.513817)" /&gt;
    &lt;path
       id="path35"
       d="m 394.84925,294.48618 -25,0 c -57.81,0 -77.28,-34.66 -96.1,-68.18 -15.35,-27.34 -29.86,-53.16 -63.9,-53.16 l -31.27,0 0,10 31.3,0 c 28.19,0 40.7,22.27 55.18,48.06 9.68,17.23 19.69,35.06 35.5,49.13 18.26,16.22 40.93,24.15 69.33,24.15 l 25,0 z"
       class="cls-2"
       inkscape:connector-curvature="0"
       style="fill:#252e43" /&gt;
    &lt;path
       id="path43"
       d="m 390.97925,27.876183 -21.09,0 c -28.4,0 -51.07,7.9 -69.32,24.15 -15.81,14.08 -25.82,31.9 -35.5,49.129997 -14.48,25.79 -27,48.06 -55.18,48.06 l -31.31,0 0,10 31.3,0 c 34,0 48.54,-25.82 63.9,-53.16 18.8,-33.569997 38.3,-68.179997 96.11,-68.179997 l 21.09,0 z"
       class="cls-1"
       inkscape:connector-curvature="0"
       style="fill:#da1f26" /&gt;
    &lt;path
       id="path45"
       d="m 429.38925,17.956183 a 14.92,14.92 0 1 0 14.92,14.92 14.92,14.92 0 0 0 -14.92,-14.92 z m 0,21 a 6.08,6.08 0 1 1 6.08,-6.08 6.08,6.08 0 0 1 -6.08,6.08 z"
       class="cls-1"
       inkscape:connector-curvature="0"
       style="fill:#da1f26" /&gt;
    &lt;path
       id="path47"
       d="m 433.38925,284.53618 a 14.92,14.92 0 1 0 14.92,14.95 14.92,14.92 0 0 0 -14.92,-14.95 z m 0,21 a 6.08,6.08 0 1 1 6.09,-6.05 6.08,6.08 0 0 1 -6.09,6.05 z"
       class="cls-2"
       inkscape:connector-curvature="0"
       style="fill:#252e43" /&gt;
    &lt;flowRoot
       style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       id="flowRoot4236"
       xml:space="preserve"
       transform="translate(0,-72.53)"&gt;&lt;flowRegion
         id="flowRegion4238"&gt;&lt;rect
           y="179.54243"
           x="18.988897"
           height="58.373276"
           width="94.241196"
           id="rect4240" /&gt;&lt;/flowRegion&gt;&lt;flowPara
         id="flowPara4242"&gt;ZakładaZ&lt;/flowPara&gt;&lt;/flowRoot&gt;  &lt;text
       x="27.791037"
       y="169.90349"
       font-size="20px"
       id="text49-1"
       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:15px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#252e43;fill-opacity:1"
       sodipodi:linespacing="125%"&gt;
      &lt;tspan
         sodipodi:role="line"
         id="tspan4528"
         x="27.791037"
         y="169.90349"&gt;PLEASE CHOOSE&lt;/tspan&gt;
    &lt;/text&gt;
  &lt;/svg&gt;
  
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>