Down the SVG Rabbit Hole: Pt 2

So you know a little bit about SVGs. Maybe you’ve read my article Down the SVG Rabbit Hole and are interested to learn more of the fascinating things you can do with SVGs. Or maybe you just want to know some advanced ways to use SVGs. This article will give you a more in depth look at what SVGs are capable of.

IF YOU ARE LOOKING FOR THE BASICS GO HERE: https://medium.com/@arichards4814/down-the-svg-rabbit-hole-e32a7d46864f

SVG element reference

This link has every single SVG element that you can use when building SVGs.

Let’s say you want to use your SVG to plot out a line graph. You could make the points by using tiny circles. Or you could use the Marker tag. <marker></marker>

//From MDN
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- arrowhead marker definition -->
    <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5"
        markerWidth="6" markerHeight="6"
        orient="auto-start-reverse">
      <path d="M 0 0 L 10 5 L 0 10 z" />
    </marker>

    <!-- simple dot marker definition -->
    <marker id="dot" viewBox="0 0 10 10" refX="5" refY="5"
        markerWidth="5" markerHeight="5">
      <circle cx="5" cy="5" r="5" fill="red" />
    </marker>
  </defs>

  <!-- Coordinate axes with a arrowhead in both direction -->
  <polyline points="10,10 10,90 90,90" fill="none" stroke="black"
   marker-start="url(#arrow)" marker-end="url(#arrow)"  />

  <!-- Data line with polymarkers -->
  <polyline points="15,80 29,50 43,60 57,30 71,40 85,15" fill="none" stroke="grey"
   marker-start="url(#dot)" marker-mid="url(#dot)"  marker-end="url(#dot)" />
</svg>

This is what shows displays from the above code.

So in this case markers are being used both as circles and as arrows.

You may be wondering what the <defs> tag is doing here. Well it is basically just defining the markers for later use. It does not render anything on the page. It does, however, set up the marker to be used later. We see it being used in the polyline paths.

Which brings me to Polyline Paths.

What makes a Polyline path different from a Path? Well a Path will always close. A Polyline is typically used for lines that will never close. Hence why we use them here in our line graph.

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Example of a polyline with the default fill -->
  <polyline points="0,100 50,25 50,75 100,0" />

  <!-- Example of the same polyline shape with stroke and no fill -->
  <polyline points="100,100 150,25 150,75 200,0"
            fill="none" stroke="black" />
</svg>

As you can see if we do not specify a stroke and fill we will get an open line.

If you’ve ever used Adobe Photoshop or Illustrator you may know about “Masks”. Well it turns out Masks are also available when using SVGs!

Let’s say you have a shape, like a circle, and you’d like to create a cutout within that shape. There is no better way to do that than creating a mask of that particular shape and “applying” it to the circle.

<svg viewBox="-10 -10 120 120">
  <mask id="myMask">
    <!-- Everything under a white pixel will be visible -->
    <rect x="0" y="0" width="100" height="100" fill="white" />

    <!-- Everything under a black pixel will be invisible -->
    <path d="M10,35 A20,20,0,0,1,50,35 A20,20,0,0,1,90,35 Q90,65,50,95 Q10,65,10,35 Z" fill="black" />
  </mask>
 
  <polygon points="-10,110 110,110 110,-10" fill="orange" />

  <!-- with this mask applied, we "punch" a heart shape hole into the circle -->
  <circle cx="50" cy="50" r="50" mask="url(#myMask)" />
</svg>

Adding a “mask” attribute to the circle will create that mask inside the circle.

Here you can see the heart mask allowing transparency.

The final tag I will talk about is similar to the previous in that you create a “definition” of the pattern first and then apply it where you want to.

<svg viewBox="0 0 230 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="star" viewBox="0,0,10,10" width="10%" height="10%">
      <polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2"/>
    </pattern>
  </defs>

  <circle cx="50"  cy="50" r="50" fill="url(#star)"/>
  <circle cx="180" cy="50" r="40" fill="none" stroke-width="20" stroke="url(#star)"/>
</svg>

So you’re beginning to see how to set this type of stuff up. We’re using the circle, rectangle or paths (from the previous article) and enhancing them with the pre defined mask, pattern or markers that we setup in the beginning of the SVG (using the def tag).

This is how the pattern is applied.

Again, we’re just scratching the surface of what is possible with the SVGs. But you’re beginning to see how to use predefined tags to then apply them to a vector shape.

Thank you for reading! Please follow me on twitter @thedrewprint. I have also created a card game coming to Kickstarter very soon. Please follow @armsandinfluence on Instagram.