Skip to main content

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.