To ensure proper scaling and visibility of your svg elements, consider wrapping them in a <symbol> element that supports element-based viewBox properties.
However, remember to include <use> elements as well, as they are essential for making your graphic assets visible.
As highlighted by @ccprog:
it is crucial to define a suitable <viewBox> for proportional scaling to prevent 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>
Make sure that the viewBox values are defined using user units. For example, the carrot path's d attribute should fit within a user unit square of 50x50 units.
Once the viewBox is set correctly, you can easily scale your svg graphics to any desired output size.
One common use case for <symbol> elements is to create reusable svg assets outside the original svg element, similar to how modern icon libraries like fontAwesome and feather icons operate.