Posted Wednesday, September 6, 2023

SVG Cheatsheet

Make simple icons with svg primitive shapes. It’s not as hard as you think.

Rectangle

<svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
  <!-- rx is for rounded corners -->
  <rect x="120" width="100" height="100" rx="15" />
</svg>

Circle

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="50"/>
</svg>

Ellipse / Oval

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <ellipse cx="100" cy="50" rx="100" ry="50" />
</svg>

Polygon

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <polygon points="100,100 150,25 150,75 200,0" fill="none" stroke="black" />
</svg>

Polyline

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <polyline points="100,100 150,25 150,75 200,0" fill="none" stroke="black" stroke-width="4" />
</svg>

Other Attributes

  • vector-effect="non-scaling-stroke"
  • stroke-linecap: round;: butt, square, round

Viewbox

viewBox="{{x origin}} {{y origin}} {{ width }} {{ height }}"

Animation