Can I change the size of a <path> to fit into a specific px size by just changing the attributes of this path?
I have an SVG with a carrot <path> in it.
<svg height="600" width="400">
<path id="carrot" fill="darkorange" d="M30 13c-1-3-5-4-7-2h-1l1-11h-3l-1
9-4-7-3 1 5 8-8-4-1 2 9 5h-1c-2
2-3 5-2 7l2 2 5-3 1 2-5 3 8 9 5-3
2 2-5 3 12 14 3-2-8-25-5 3-1-2 5-3-3-8"/>
</svg>Currently the carrot path fits into a square of 50px * 50px. I want to make the carrot path fits into another px size, for example, a square of 30px * 30px.
I found a solution from this question to fix a path to a certain px size. It needs to modify the attributes of the <svg> container. However, my <svg> includes other elements besides this <path>, which I don't want to change. Therefore, I cannot modify the attributes of the <svg>.
I can control "transform" attribute of the <path> to scale it, but it can only scale it by ratio, rather than change the <path> to a certain px.
CodePudding user response：
You can nest <svg> elements. For the inner element, you can even use x and y attributes to position the path freely.
<svg x="20" y="20" height="600" width="400">
<svg width="30" height="30" viewBox="0 0 50 50">
<path id="carrot" fill="darkorange" d="M30 13c-1-3-5-4-7-2h-1l1-11h-3l-1
9-4-7-3 1 5 8-8-4-1 2 9 5h-1c-2
2-3 5-2 7l2 2 5-3 1 2-5 3 8 9 5-3
2 2-5 3 12 14 3-2-8-25-5 3-1-2 5-3-3-8"/>
</svg>
</svg>CodePudding user response：
You might also wrap your svg elements in a <symbol> that supports element based viewBox properties.
But you also need to add <use> elements – otherwise your graphic asset won't be visible.
As @ccprog already illustrated:
you need to define a suitable <viewBox> for proportional scaling (preventing any cropping of your graphics).
svg {
border: 1px solid red
}<h3>Original svg assets</h3>
<svg height="400" width="600">
<path id="carrot" fill="darkorange" d="M30 13c-1-3-5-4-7-2h-1l1-11h-3l-1 9-4-7-3 1 5 8-8-4-1 2 9 5h-1c-2 2-3 5-2 7l2 2 5-3 1 2-5 3 8 9 5-3 2 2-5 3 12 14 3-2-8-25-5 3-1-2 5-3-3-8z" />
<path id="carrotLarge" fill="green" d="M 400 130 c -10 -30 -50 -40 -70 -20 h -10 l 10 -110 h -30 l -10 90 l -40 -70 l -30 10 l 50 80 l -80 -40 l -10 20 l 90 50 h -10 c -20 20 -30 50 -20 70 l 20 20 l 50 -30 l 10 20 l -50 30 l 80 90 l 50 -30 l 20 20 l -50 30 l 120 140 l 30 -20 l -80 -250 l -50 30 l -10 -20 l 50 -30 l -30 -80z" />
</svg>
<h3>Svg elements wrapped in symbols</h3>
<svg height="400" width="600">
<symbol id="symbolCarrot" viewBox="0 0 50 50">
<path d="M30 13c-1-3-5-4-7-2h-1l1-11h-3l-1 9-4-7-3 1 5 8-8-4-1 2 9 5h-1c-2 2-3 5-2 7l2 2 5-3 1 2-5 3 8 9 5-3 2 2-5 3 12 14 3-2-8-25-5 3-1-2 5-3-3-8z" />
</symbol>
<symbol id="symbolCarrotLarge" viewBox="100 0 500 500">
<path d="M 400 130 c -10 -30 -50 -40 -70 -20 h -10 l 10 -110 h -30 l -10 90 l -40 -70 l -30 10 l 50 80 l -80 -40 l -10 20 l 90 50 h -10 c -20 20 -30 50 -20 70 l 20 20 l 50 -30 l 10 20 l -50 30 l 80 90 l 50 -30 l 20 20 l -50 30 l 120 140 l 30 -20 l -80 -250 l -50 30 l -10 -20 l 50 -30 l -30 -80z" />
</symbol>
<use href="#symbolCarrot" width="50" height="50" fill="darkorange"></use>
<use href="#symbolCarrotLarge" width="500" height="500" x="100" fill="green"></use>
<use href="#symbolCarrotLarge" width="30" height="30" x="50" fill="red"></use>
</svg>
<h3>Resused svg assets – outside original svg</h3>
<svg height="30px" width="30px">
<use href="#symbolCarrot" fill="darkorange"></use>
</svg>
<svg height="50px" width="50px">
<use href="#symbolCarrot" fill="darkorange"></use>
</svg>
<svg height="30px" width="30px">
<use href="#symbolCarrotLarge" fill="green"></use>
</svg>The viewBox values need to use user units:
For instance: the carrot path's d attribute fits to a user unit square of 50x50 units.
Once the viewBox fits you can easily scale your svg graphics to any output size.
Probably the most common usage for <symbol> elements is to create reusable svg assets outside the original svg element.
E.g. most modern icon libraries (fontAwesome, feather icons etc) use a similar concept.