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

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>

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.

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.

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.

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.

Software Developer — Game Creator — Let’s work together! Reach out on LinkedIn or Twitter @thedrewprint

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store