Dead Simple SVG Scaling while keeping complex path definitions

I recently was working on a complex SVG element that was for a map of the USA. This map had 50 complex path definitions for all the states.

My problem though was I needed this SVG image downsized as a whole, by about 25%. I also needed all those paths to scale down as well because of complex Javascript functions that relied on those paths.

I tried a variety of ways to scale this SVG image, but couldn’t get results to work as needed with functionality; the best I accomplished was having my SVG image become clipped or “cropped” in the image region.

The Solution

Wow, This was a lot simpler than I realized.

After looking through a SVG definition site, I found out I can wrap my <path> tags in what’s called a <g> tag, otherwise known as the group tag.¬†All the group tag does is group together elements that are wrapped in the group tag.

Once all these paths were wrapped in the <g> tag, I gave then added one more line of code Рthe transform attribute. Since the transform applies on that whole grouping of elements, I was able to scale all my items and the path definitions in one line of code.

<svg x="0px" y="10px" width="750px" height="500px">
    <span style="line-height: 1.714285714; font-size: 1rem;"></span>
        <g transform="scale(0.75)">
            <span style="line-height: 1.714285714; font-size: 1rem;"><path id="DE" tag="8" title="Delaware" fill="#bebdbd" stroke="#bebdbd" stroke-width="1"></path></span>
            <span style="font-size: 1rem; line-height: 1.714285714;"></span>
            <span style="line-height: 1.714285714; font-size: 1rem;"></span>
        </g>
</svg>

  • I hate spam as much as you do, please unsubscribe at anytime.
  • This field is for validation purposes and should be left unchanged.

Leave a Reply