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.
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.
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>