Specifying units for an SVG path

Specifying units for an SVG path isn’t obvious at first glance.  The trick is to wrap the path in a nested svg element with it’s size specified the units you require.

In this example, the units of the path are relative the the viewBox (0 0 10 10) and the actual size will be determined by the width and height of the svg element (width=10mm, height=10mm).

<svg x="0" y="0" width="10mm" height="10mm" viewBox="0 0 10 10">
 <!-- these are all in viewBox units -->
 <path d="M 5 9  L 1 5 L 3.5 5 L 3.5 1.5 L 6.5 1.5 L 6.5 5 L 9 5 z"
       style="fill: #FFF; stroke: black; stroke-width: 0.5">
 </path>
</svg>

You can of course change the ratio of the viewBox and width/height as you please and things will scale accordingly.

This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *