Skip to content

Instantly share code, notes, and snippets.

@geoffyuen

geoffyuen/svg.md

Last active July 25, 2020 16:53
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save geoffyuen/98af58a6fe941926e20185880b9a33cc to your computer and use it in GitHub Desktop.
Save geoffyuen/98af58a6fe941926e20185880b9a33cc to your computer and use it in GitHub Desktop.
Download ZIP
SVG Cheatsheet
Raw
svg.md

SVG Cheatsheet

Rectangle

<svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Rounded corner rectangle -->
  <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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment