Figma Vectors
Fills
- solid color
- gradient
- linear gradient
- others..
Injecting linear gradient to existing path only svg.
<!-- from -->
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<path
d="M10.59 2L6 6.58L1.41 2L0 3.41L6 9.41L12 3.41L10.59 2Z"
fill="black"
/>
</svg>
<!-- to -->
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="myGradient" gradientTransform="rotate(90)">
<stop offset="5%" stop-color="gold" />
<stop offset="95%" stop-color="red" />
</linearGradient>
</defs>
<path
d="M10.59 2L6 6.58L1.41 2L0 3.41L6 9.41L12 3.41L10.59 2Z"
fill="url('#myGradient')"
/>
</svg>
Resizing
Web - css
Using viewBox
Towards clean design / code
Do not use rectangle shape as a vector. (as background)
We often see designers using vector path as a rect shape, placing it as a background. This approach is only recommanded when clipping graphics. Having a solid / gradient color rect in a vector node is not recommanded.
Related Lints
- Don't set constraint to stretch for vector
Accepted values are
left
|right
|top
|bottom
|scale
(with aspect ratio)
Rect shape vector will automatically interpreted as Simply Rectangle
WIP - rectangle detection based on svg path data. this algorithm is under development.