0

For example, the viewbox dimensions: 

<svg stroke="#fff" class="wow world_map" viewBox="0 0 1700 2200" preserveAspectRatio="xMidYMid meet" stroke-width="2" version="1.1">

Create a much smaller rendered image than:

<svg stroke="#fff" class="wow world_map" viewBox="0 0 170 220" preserveAspectRatio="xMidYMid meet" stroke-width="2" version="1.1">

Why would this be happening? The entire <svg> is in a <g> tag, and when I inspect element and hover over the <g> is just select the image, but when I hover over the <svg> it selects a massive empty viewBox that has been created that seems to grow inversely to the size of the actual image.

I should also note that I'm doing CSS animations on this SVG, so I'm not sure if that is creating a conflict. Also, the SVG is inline HTML.

Any ideas would be greatly appreciated. Thanks!

Laser
  • 5,085
  • 4
  • 34
  • 48
  • 1
    Assume you have some kind of width/height set on the outer element of the svg, you now have to fit a coordinate space of 1700x2200 in there, so the larger the coordinate space you try to fit in it, the smaller the element will appear visually. Think about it more as co-ordinates needed to appear in there, rather than an absolute width/height in pixels or something. You can always scale the g element if you can't adjust the svg viewBox for some reason. – Ian Jun 22 '15 at 09:51
  • Thanks Ian! Also, Robert's explanation in the link explains the concept very succinctly, thanks! – Laser Jun 23 '15 at 02:17

0 Answers0