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?
I think the original should work fine, if you change
viewbox to viewBox
