How to fit svg path to certain px size without change attributes of svg?

Tingying He 0
Viewed 45

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.

Diagram for the expected result

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.

svg css html
2 Answers

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>

ccprog0

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.

herrstrietzel0
Related