Understanding the Benefits

Now – inserting images into SVG elements is just part of what we can achieve; there is a host of other tricks we can use, including embedding objects such as video! This opens up some interesting possibilities, but before we explore them, there is one topic we should cover: image fallback. Most modern browsers support SVG by default, but as in life, there always has to be the odd one out that people are still using…

Exporting Images – an Epilogue

Perfect – we have a process in place to create our PNG fallback images: we can move onto more important tasks….

Not so fast my dear reader – can you spot a major flaw in our design? It’s a deliberate gap – our process can only handle one image at a time, when run using the command line. This is fine if we’re working on one image, but we may have hundreds – clearly this isn’t something sustainable!

Thankfully the svg2png package can be used within a task runner such as Grunt ( http://gruntjs.com ), or Gulp ( https://gulpjs.org/ ), to help automate the process if desired – I’ve focused more on the principles of conversion for this exercise, but if you browse to the NPM site, you will find details of how to implement the code required to fully automate conversion of images.

It should be said though that providing a fallback must be a considered decision: Is it worth spending time implementing this process if our target market only includes a tiny proportion of browsers that don’t support SVG? If we don’t provide PNG images, then what are the alternatives? It might be that we create a font that stores SVG icons for example (more anon), or that we convert images to data-URIs and store these in our style sheets. I would strongly recommend spending some time researching the options on the NPM package directory at https://www.npmjs.com  – it’s possible that you might find a package that provides a solution that better fits your needs!

For example, have a look at https://www.npmjs.com/package/svg-to-png  – it’s an older package that hasn’t been updated for a while and doesn’t provide command-line support; this may work just as well as svg2png.

One option we can explore though as part of exporting is to use data-URIs – these convert any images (including SVG) to long strings of random characters that can be inserted into our style sheet, as a replacement for calling a separate image. There are some benefits to using this process, so without further ado, let’s dive in and take a look at the process in more detail.

Optimizing Our Image

Our next exercise relies on using an optimized image to make it as efficient as possible and not clutter up our style sheet with irrelevant code.

This is a subject we’ll cover in more detail, later in the book; for now, we’ll work on the basics, using an online service.

To optimize our image, go ahead and follow these steps:

Now that we have an optimized image, let’s crack on with the main part of the demo:

Phew – that was a monster exercise! Some of you might ask how we can benefit from using this method: it is indeed a valid question! There are some benefits though to using this method (and some drawbacks too) – let’s pause for a moment to consider them in more detail.

Understanding How Our Code Works

The basic principle of using a data URI has been around since 1998, when it was first defined in RFC2397, in August of that year. Put simply, we convert an image (of some description) into a string of characters, which can be inserted into a background-image property within a style sheet rule.

Leaving these aside for the moment, let’s take a look at the code we created in more detail – we added in four different types of data URI as background images, which start with a data:image/svg+xml;base64 tag, for base-64 images, or this tag for native SVG images: data:image/svg+xml;charset=UTF-8.

Within each data URI tag is our string of characters – this will either be a base-64 encoded text (option 1), or the optimized XML from within our SVG image (options 2 to 4). The last three examples all use the same basic XML from within our SVG, but the data URI has been progressively encoded to ensure compatibility with web browsers.

Okay – let’s change tack: so far, our examples have focused on the basics of getting our image onto a page. In many cases, this will suffice, but what if we wanted to take it further? Traditionally we might do this using the likes of Photoshop – instead, how about using SVG to apply these effects? This opens up some real possibilities, such as using images to provide a color mask to SVGs – let’s dive in and take a look to see what this means in practice.

Exploring How the Code Works

Our demo has only touched the surface of what is possible when applying masks – a really great effect that I’ve seen in use is to blur a strip of text across a background image (such as in a carousel), and to then add suitably sized text over the top. I could go on, but suffice to say it’s worth spending time on Google! But I digress…

So – what does a mask do? Put simply, it hides or “masks” an area specified using coordinates or an SVG shape; it has the effect of merging background and foreground images into one.

In this instance, the #mask reference in our CSS ties back to the mask defined in the <defs> block – we set a height of 100% square, starting at point zero. This contains a background element that we style with #666 (a very dark gray color); on top of this we add a main title and subtitle using <text> elements. Our mask is then applied to the <rect> element at the end of our SVG graphic, using the mask attribute provided in our style sheet.

Let’s move on – we’ve covered the use of images, and explored how we can create shapes…what’s missing? Ah yes: icons. There will be occasions where we might want to display some form of icon – credit card images, SSL security logos, and the like. We can of course display them individually – this will work, but as any good designer will say, it’s not ideal. To get around this, we can use that age old principle of creating sprites; what works for standard images will also work for SVG graphics, so let’s dive in and take a look.

Creating Image Sprites with Icons

Creating sprites is nothing new – we can do this using most common image formats, although for convenience it’s likely that most people will choose PNG or JPEG as their destination format. The same principles can be applied to SVG, although we have an extra route – for small projects, we can either manually create sprites by hand, or we can automate them using a technology such as Node.js. Let’s look at each option in turn.

All we need is a text editor and our images – provided we can open each image and extract the relevant code, we can put together our SVG sprite. The only changes we need to make are to use <symbol> as the element for each sprite image, and that we need to provide both a selector ID and a suitably sized viewbox attribute in our code.

Using the <symbol> Element

We’ve touched on specifying our viewBox, but what’s this <symbol> element I see in our code…? Put simply, it’s a way of grouping elements together, for later reuse.

This last part is key – when working with SVG graphics, we can group elements together using the <g> element, and perform actions on all elements in a group simultaneously. The <symbol> element takes it further by allowing us to instantiate an instance later (as if it were a graphical template), with a <use> statement. This is perfect if we have a shape that can be displayed in a range of colors; we don’t need to implement separate SVG graphics for each, but instead reuse the base image multiple times.

To help with creating symbol elements, head over to https://svg-to-symbol.herokuapp.com/  – this will convert an existing SVG to use <symbol> elements.

There are a couple of points we should be aware of though – notice how the SVG element has been styled with display: none? This is essential, otherwise we may find our images appear twice – once in the source file, and again as our sprite image. We can’t avoid this, so it’s something we have to get used to adding to our code!

The second drawback is size – creating a sprite manually really only suits small images, where the XML is manageable; this is really about being able to navigate through our code, than any speed issue! It’s for this reason that a more automated approach is beneficial – we can complete the process using an online service such as Iconizr, or take the task runner approach and use Node.js and a runner such as Gulp or Grunt. Let’s begin with a look at using an online service first.

We now have a useable sprite image, which can be referenced in code – this works perfectly well, but it is still something of a manual process that is dependent on demand on the Iconizr site. In this age of speed, we need something that removes this dependency – we can achieve this using Node and a task runner such as Gulp, so let’s dive in and take a look.

Automating the Process

The use of sprites should be at the forefront of any developer’s mind – it’s easy to see that with a little extra styling, we can dramatically reduce the number of images we need to use, which in turn reduces the resources we must from the server. Creating them though can be a thankless task – it’s one of those necessary evils, if we are to benefit from using sprites.

Trouble is, we’ve all got better things to do, right? I say better – in many cases, better is more likely to mean important, rather than interesting! This makes it all the more important for us to invest in automating this process if we can – it’s very likely we would use a Node.js-based task runner such as Gulp or Grunt. There are plenty of Grunt or Gulp-based packages that can help; it’s worth checking out the NPM Package Manager site at https://www.npmjs.com for ones you can try out.

As a start, you can take a look at https://github.com/jkphl/gulp-svg-sprite (for Gulp); or a Grunt equivalent, at http://www.grunticon.com/ .

For our next exercise, we will use Gulp to create our sprite, and the gulp-svg-sprite package – if you prefer to use a different task runner (such as Grunt), then this is fine; the process will be very similar. In any case, we will assume that Node.js has already been installed – if you didn’t install it earlier, then go ahead and do it now.

See how easy it was to convert to using sprites? Our demo uses just the one image; we instead make use of the <use> tag to insert the selected sprite image into our page. It is worth noting though that in case you’re wondering, the pure svg-sprite Node module does not read or write to the filesystem, so extra work is required to configure it; using a package for Grunt or Gulp will take care of this step automatically for us.

Use of Icon Fonts and SVG

At this point, I’m going to just touch on a different subject, but related to SVG icons: there are online services available that allow us to convert icons into a font file, for use in our pages. However, this is not without its issues; it is no longer a recommended practice. If you are interested in knowing more, then please check out the Working with Icon Fonts and SVG PDF I’ve created, and put in the code download that accompanies this book.

Okay – let’s move on: we’ve covered the use of images in SVG in some detail; how about we take a look at using text within an SVG graphic? There are some interesting options available to use, of which we’ll cover some of the more interesting ones later in this book. For now though, let’s look at the basics of using the <text> element within SVG.

Applying Different Effects to Text

If someone posed the question, “What can one do with text when working with SVG graphics…?,” then the only answer must be “How long is a piece of string…?”

It might sound odd to answer a question with one, but the truth is – we are only limited by our imagination! If you search online, Google will return hundreds of results, where others have created all manner of examples of styled text. To really push the boat out though, and add some extra sparkle, animation may be required – SVG is a great format for animating elements; for inspiration, take a look at a post by Henry Wijaya at http://bashooka.com/coding/20-cool-svg-text-effects/ , or the collection on Codepen by Julia Buhvalova at https://codepen.io/collection/DPYwYN ?

We will cover animating SVG elements in more detail in Chapter 6, “Animating Content” – if we bring it back to reality though for now, we can still apply different patterns to our text within SVG. Our previous example touched on simply adding color and thicker edges to our text, but what about using images to style our text?

Let’s take a look at the code in more detail, to see how this simple but effective style works, and why we must choose the right font, color, and image for maximum impact.

Exploring How the Code Works

Our code begins with creating what should now be a familiar SVG container – we’ve applied a class of heading that we use to control the font size of our text (set at 4.5rem). We then set a definition block, into which we create our <pattern>, using the landscape image from earlier in the chapter. This pattern is set to 900px by 900px – this patternUnits value of userSpaceOnUse means it will adapt in size if it’s calling element (the <text> tag) changes in size.

We then create the all-important <text> tag – this is set to be centered in the middle of the screen, with the start point being set as 50% in, and 20% down. We’ve applied a class of headingtext, which is used to set the stroke, stroke-width and letter-spacing values – and of course our pattern! We then tie off our design by setting the background color to #3C3928, or a very dark grayish yellow color.

Understanding How It Works

At face value, if we were to compare the code used to create our map with that provided by Google, we wouldn’t notice any real change. Sure, the configuration options may be in a different order, but it will still have the same effect.

So how does it work? The magic lies in the SVGMarker.min.js file – it’s too large to reproduce here in full, but in a nutshell, it takes a copy of the icon we’ve specified, and draws it as an image that is superimposed onto the map. The beauty of this solution is that we can configure our map object in exactly the same way as for a standard PNG or JPEG image , as the work to translate it into a format Google Maps can understand, is handled by the SVGMarker object.

It does raise an important question though: surely we could convert all of our SVG graphics into data URIs, and insert this into our code. Wouldn’t this be better – allowing us to resize or manipulate it? Well – the answer is both yes and no: it will depend on the size of the code required to create our SVG.

If the code we’ve used to create this graphic is large, then adding this (and other images) to our markup will clearly make it larger and less manageable. There will come a point where it is too large to manage, and that this will have an effect on page load times. This is something we clearly want to keep to a minimum, so we just need to be mindful of how many images we turn into data-URIs, so that we keep a sensible balance between calling external images, against those listed inline within our code.