0

In example1 below is a snippet of the inline SVG code included in the html document. Notice viewbox="0 0 25 25" "zooms" the image on the top left corner so it appears larger than the second example.

example 1

<svg 
  xmlns="http://www.w3.org/2000/svg"
  width="200" height="200" viewbox="0 0 25 25"
>
  <defs>
    <style type="text/css"> 
      .line-1 {
        stroke: #0f7;
        stroke-width: 2;
        stroke-linecap: butt;
      }
      .line-2 {
        stroke: #0fe;
        stroke-width: 1.5;
        stroke-linecap: square;
      }
      .line-3 {
        stroke: #0ef;
        stroke-width: 1;
        stroke-linecap: round;
      }
    </style>
  </defs>
  <line
    x1="13" y1="7" x2="44" y2="55"
    class="line-1"
  />
  <line
    x1="6" y1="8" x2="61" y2="89"
    class="line-2"
  />
  <line
    x1="2" y1="6" x2="65" y2="97.5"
    class="line-3"
  />
</svg>

But if we include this SVG as an image file viewbox does not work. See below and notice how the image appears far more zoomed out even though viewbox="0 0 25 25" is still present in the SVG file itself.

example 2

<img width="200" height="200" src="http://svgur.com/i/2Wc.svg">

In the second example the SVG file is the same identical code as the first example. ( this can be seen here: http://svgur.com/i/2Wc.svg [ view source ] ).

It appears viewbox is being ignored in the second example. Unless this is considered correct behavior. I do not know. If it is correct behavior then how do I edit viewbox in the second example to zoom like the first? Is there an alternative?

basement
  • 718
  • 8
  • 15
  • @Paulie_D so how do I alter the viewbox on the original SVG if included as an image? This works on inline SVGs. – basement Aug 08 '17 at 13:44
  • @Paulie_D so the answer to this question is No. You are sure that there's no way to do this without some JavaScript workaround? Then Normangorman's method may be useful. – basement Aug 08 '17 at 13:48
  • @Paulie_D see the accepted answer. It's `viewBox` instead of `viewbox` and it works perfectly. This is very possible and due to such a inconspicuous solution. – basement Aug 08 '17 at 14:03

2 Answers2

2

I think the original should work fine, if you change

viewbox to viewBox

Ian
  • 13,724
  • 4
  • 52
  • 75
  • Had no idea this would be case sensitive. Such a simple solution and easily overlooked since html5 is case insensitive. Thank you! This worked. – basement Aug 08 '17 at 14:01
0

You could use the workaround described here: https://stackoverflow.com/a/24933495/3335108

i.e. dynamically converting all img tags that point to SVGs to inline SVGs when the document loads.

Benjamin Gorman
  • 360
  • 1
  • 11