Playing with SVG

Basics - Path

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">

  <path d="M 10 10 H 90 V 90 H 10 Z" fill="transparent" stroke="black"/>

  <!-- Points -->
  <circle cx="10" cy="10" r="5" fill="red"/>
  <circle cx="90" cy="90" r="5" fill="red"/>
  <circle cx="90" cy="10" r="5" fill="red"/>
  <circle cx="10" cy="90" r="5" fill="red"/>

</svg>

One of the more powerful tools that SVG provides is the <path>. A path can have attributes, but it’s primary driver is d for data, which takes a list of Commands, where each command is a composed of a letter and numbers that are that command’s parameters.

Capital Letters signify absolute commands.

lower case letters signify relative commands.

In the example above:

M stands for MoveTo, moving the cursor to the specified point.

H stands for Horizontal, drawing a line from the current point to the end x coordinate.

V stands for Vertical, drawing a line from the current point to the end y coordinate.

Z stands for ClosePath, closes the current path drawing a line to the initial point.

<path> allows me to chain these together to draw things, in this case a square.

Space vs Comma

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Example of a polyline with commas between point pairs-->
  <polyline points="0,100 50,25 50,75 100,0" />
  <!-- now without commas--> 
  <polyline points="0 100 50 25 50 75 100 0" transform="translate(100,0)" />
  <!-- translated so they're not on top of each other-->
</svg>

SVG Cat

.Emoji designed by OpenMoji – the open-source emoji and icon project. License: CC BY-SA 4.0 This one in particular was designed by Sofie Ascherl: https://openmoji.org/library/emoji-1F408/Yes, that makes this a copy cat.

<svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg">
<g xmlns="http://www.w3.org/2000/svg" id="line" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1" fill="none" stroke="#000">
    
    <path d="m12.46 35.74c-2.333 1-4.917 0.8333-4.917 0.8333-1.677 0.1458-3.115-4.01-2.485-4.733l3.318-5.1-1.75-3.417s5.008-1.415 7.883 2.09c0.3444 0.42 0.7943 0.7429 1.279 0.9871 0.0298 0.015 0.0602 0.0302 0.0912 0.0456 2.593 1.289 5.546 1.571 8.385 0.9981 7.222-1.458 14.07-1.37 21.7 2.212 7.625 3.583 14.53-2.25 13.64-7.5-0.793-4.647 3.562-7.583 6.75-5"/>
    <path d="m16.05 48.82c0.6006-2.206 8.491-3.648 8.491-3.648s3.228-1.201 1.426-4.504"/>
    <path d="m18.3 33.24c-1.543 1.834-3.893 4.803-0.44 9.158 0 0-6.756 2.853-6.006 8.033 0 0 0.3624 2.476 2.402 2.402"/>
    <path d="m23.5 50.03c-1.156 7.254 2.386 6.055 3.017 5.661 1.148-0.7173 1.848-9.854 3.952-11.31 1.592-1.104 8.167-0.3021 8.167-0.3021"/>
    <path d="m38.44 41.33c0.0911 1.742 0.7529 3.402 1.734 4.845 0.6616 0.9727 1.803 2.32 1.453 2.985-4.479 8.5 0.6224 7.022 1.083 6.167 3.188-5.917 6.125-4.104 4.647-10.52 0 0 5.27-1.81 5.52-7.977"/>
    <path d="m48.15 45.59s2.367 3.204 7.758 2.693c0 0-3.326 6.762 0 7.62 1.917 0.4941 4.722-11.16 4.722-11.16s-1.839-0.7937-3.951-4.182"/>
  </g>
</svg>

Takeaways:

• You don’t need spaces as long as you can tell that numbers or commands are distinct.

• You can continue adding additional sets of parameters to a command. For example: l says this:

  Any subsequent coordinate pair(s) are interpreted as parameter(s) for implicit relative LineTo (l) command(s) (see below).

• SVG doesn’t do math, so 1-2 is two points: 1 and -2.

• c is a cubic bezier curveMDN tutorial on Path Cubic Bezier Curves:

  Cubic Béziers take in two control points for each point.

• In the original, the stroke details: stroke-linecap, etc., were attributes of each element, weThanks Jeff for pairing with me on this! refactored this into the group’s attributes.