Understanding How the Code Works

At this point, some of you may be wondering why, if we look at the code closely, we appear to have two <rect> elements in use, when we clearly can see a square and rectangle on screen!

We start with the standard <svg> tags to define our element – you will see these in use whenever you create an SVG image. Next, we have our <rect> element, which has a number of defined attributes that govern its size, position (x and y), fill color, and thickness (or stroke-width) of the border.

The key to this shape (and any other) is in the positioning – each shape is positioned using a defined grid position (as we touched on back in Chapter 1), where the top left corner of our viewport is point 0, 0. In our example, our boxes (although it isn’t displayed as such in print), are displayed 10 pixels to the right and 10 pixels down, from point zero.

We will touch on stroke, stroke-width, and fill in more detail later in this chapter in the section “Painting elements.”

The remaining basic shapes are as straightforward to create, so let’s continue with this theme, and take a look at how we can create SVG circles and ellipses.

Exploring How the Code Works

If we take a close look at the code we’ve just created, we can start to see some similarities – both to what we’ve just created in the previous exercise, and between how the circle and ellipse are created.

To put this in context of our example, our circle starts at point 60, 65 and has a radius value of 55. The ellipse is a little wider, so we must allow for this in our example – it starts at position 75,75: it has a x radius value of 70 and y radius value of 50. Note though that these values are from the center of the shape outwards; multiply both values by 2, to get the true size of the ellipse.

Okay – let’s change tack: not every shape we need to create will be a simple square or circle ; what about creating multisided shapes, for example? Thankfully it’s just as easy to create these shapes, so let’s dive in and take a look.

Exploring How the Code Works

If we take a look at our code examples, we can see the first two sets of attributes in use within the line example – these simply use the SVG grid position system to locate the starting and finishing points within our view port: x1 = "20" y1 = "20" x2 = "175" y2 = "180".

A little further down, the points attribute comes into play – again, we specify our coordinates using the x, y format . So for example, the starting point for our octagon is 60, 10, or 60 units in from top left, and 10 down. We then continue all the way round the shape, providing suitable coordinates to complete our shape.

Okay – let’s change tack: we have one final set of shapes to explore; these open up a wealth of possibilities, although they will take a little more work to come to grips with how they can be configured! I’m talking about paths and markers, so let’s dive in and explore the potential uses of these two elements in more detail.

Understanding Our Code in Detail

The first line of code is the standard opening tag for any SVG shape or design; we’ve met this already in previous exercises, so should be a little more familiar by now. The real magic happens in line 2 – we have the (aptly named!) <path> tag, inside which we assign a series of numbers and or letters to create our design.

There is, however, method in the apparent madness of that string of characters – they are a series of commands to define how our shape should appear. To make sense of it, there is one important concept we should be aware of: the difference between absolute and relative commands .

What do I mean by this? Well – let’s take the first command: M2,5. Put very simply, it means “move to the exact location 2, 5”. The next command, C2,8 8,8 8,5, is a little more complex: we use this to create a Bezier curve. The starting point for it was defined with the initial command; the next three coordinates define the degree of curve and end point of our Bezier curve. Keeping this in mind, let’s assign those coordinates to an edited version of the previous screenshot (Figure 2-5).

Note that in the above screenshot, I’ve only included the coordinates of the C command, to show how it matches with our original command.

We’ve touched on the need to understand the difference between absolute and relative commands – the key to making paths work is this: most commands come in pairs – either as uppercase characters, or as lowercase equivalents. The uppercase characters represent absolute commands, whereas the lower case ones are relative. To put this into context, our example directed the starting point to be at the absolute location of 2,5. If we had made it relative (i.e., used a lowercase m instead), then it would read as “move 2 to the right, and 5 down,” from our current location instead.

Working with paths can open a real minefield of possibilities – the d attribute we met at the beginning of this section has a mini-syntax in its own right! It’s absolutely worth exploring what is possible; some people may say it’s simpler just working with paths (as you can do just about everything we’ve already covered), but the key to remember is that using predefined shapes will make it easier to read the code in your final solution.

For a good in-depth tutorial, check out Chris Coyier’s guide on using paths, which is available at https://css-tricks.com/svg-path-syntax-illustrated-guide/ . This contains a list of the different commands we can use to create individual paths, in addition to a good explanation of how paths operate.

Let’s move on – we can do a huge amount with the powerful path element, but to really take things up a level, how about adding markers to our design ? Mark…huh? I hear you ask – what would that give us…?

Adding Markers to SVG Paths

Aha – let me explain: who hasn’t used Google Maps in some form or other? You enter the zip code or name of a location, and up pops a little pointer to indicate the location, right?

That’s a marker – trust me, it’s nothing more complicated than simply identifying a point on our design! We use the same principle when working with SVG designs. There’s a variety of different uses for markers – we could use them as indicators on maps, or for a wiring schematic we might create, where clarity is paramount, irrespective of the size of the design.

Let’s put this to the test, and construct a simple SVG of a line that has a marker element at one end – this will be the subject of our next exercise.

You can see a working version in a Codepen at https://codepen.io/alexlibby/pen/goXbRJ , or peruse a version available within the code download that accompanies this book (look for the paths.html file).

Our design is deliberately meant to look simple, but if you take a look at the code in more detail, you can see a few keywords we’ve not touched on to date. Let’s dive in and take a look at them in more detail.

Understanding How Our Code Works

The <defs> element is not rendered immediately, but instead defines an object for later reuse – it’s best to think of any object stored within a <defs> block as a template or macro created for future use.

Within our <defs> element, we create a <marker> tag, to which we apply an ID of circle1; the viewport size of our marker is defined by the markerWidth and markerHeight values, and will be attached using the refX and refY coordinates.

The value passed via marker-end references the object we created in our <defs> block, which we discussed earlier in this section.

We could have used marker-start to attach our marker at the start point of our line, but I don’t think the final result would look quite as good! We’ve touched on some of the attributes that can be used – Mozilla has a useful article outlining each option in more detail, which is available at https://developer.mozilla.org/en-US/docs/Web/SVG/Element/marker .

Let’s change tack and focus on something a little more complex – we’ve touched on using paths as a way of creating more abstract shapes, but there will be occasions where we need something a little more…practical! Thankfully we can use paths to achieve this; let’s work on a more practical example of using this element in more detail.

Exploring How Our Code Works

Our code was set up in a <defs> block – this allows it to be reusable throughout the SVG image. A closer look at the content of the code for the image shows multiple paths in use – we’ve already applied our gradient(s) to one of them, so they can be applied to the remaining paths in the same manner.

Within our definition, we have our <linearGradient> tags – alongside the standard ID, we have our coordinates (x1, y1 and x2, y2) and the <stop> attributes. The latter control the ramp of colors to use over the shape – in our case, we’ve specified 0% and 100%, so the gradient will run over the entire shape. If we had set something akin to 10% and 50% (for example), then the gradient will start from 10% in, and finish at 50% of the range.

I’d recommend changing the values as a test – this is the best way to experience the impact of changing the stop values on our design.

Exploring the Code in Detail

Remember how we talked about the different ways of implementing SVG images, back in Chapter 1? Well, for many occasions, we would simply use <img> tags, treating our SVG image as if were a standard PNG or JPEG image, for example. However, we can also use background images, although the trade-off is that we lose the ability to style individual elements with the SVG image.

Our code doesn’t contain anything out of the ordinary, save for just one line – line 11. This is a call to background image: we treat our target image as if we are referencing one on available at a URL . However, instead of a URL, we have the code of our SVG as a string of characters; the code for this was provided by the Hero Patterns website, but it could equally have come from a convertor, such as the one available at https://codepen.io/elliz/pen/ygvgay . Once the code has been added to our style sheet, the results will be displayed when previewed within our browser.

Creating an Alternative Pattern

At this point, we’ve completed our demo – it looks great (at least for what it is) and works very well. This however is only part of the story: What about using some of the shapes we created right back at the start of this chapter?

To see how this works, go ahead and add this code to the background demo we’ve just created – it needs to go in immediately after the <h2>, on or around what will be line 12. We will also need to add in an svg { float: left; } to our style sheet, to allow text to flow around the SVG.

If we refresh the browser, we should see the updated version, as shown in Figure 2-13.

Notice the difference – this gives us the ability to add in SVGs as patterns to a page; if we wanted to, we can simply extract the contents of the SVG into a string and replace the existing background URL with this new code. Suffice to say that this gives us plenty of options when creating our projects!

It’s time to change tack – we’ve almost come to the end of this chapter, but before we move onto exploring images and text, there is one more topic we need to cover. We’ve touched on a variety of different techniques for creating shapes; unfortunately, there is not enough space in this book to print all of the available configuration options we can use to manipulate these shapes. There are, however, plenty of good resources available, so let’s take a moment to cover off some of the more useful ones as a starting point for developing your skills with SVG.