SVG patterns offer a more flexible approach to repeating a background image on a web page than CSS tiling. Let’s look at why that is, and how you can use them. Show What You’ll LearnThis tutorial is available in both video and textual form–here’s a breakdown of what you’ll learn:
Watch the Screencast1. CSS TilingLet’s start by checking out CSS tiling–the more
traditional method of repeating an image for a background. The idea is straightforward: we pass a URL to the body { background: url("cuadros.png"); } Here’s how that looks: 2. SVG PatternsLet’s now take a look at SVG patterns–something which, when first encountered, is a little more difficult to understand. We’ll begin by hand-coding an example. Hand Coding SVGsFor a refresher on how to hand code all the various parts of an SVG, these two beginner’s tutorials by Kezz Bracey are really helpful: Begin With an SVGTo start off, we’ll create an svg element, giving it a height and width of 100% so that it occupies whatever container we place it in. <svg width="100%" height="100%"> </svg> To create a <svg width="100%" height="100%"> <defs> <pattern> </pattern> </defs> </svg> Now let’s add some
attributes to that pattern element. We’ll give it an ID so we can reference it later, then we’ll specify starting X and Y coordinates, width and height values, and state that the <svg width="100%" height="100%"> <defs> <pattern id="polka-dots" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse"> </pattern> </defs> </svg> Having setup those parameters, we now need to define the image which will be repeating. Let’s create a basic circle: <svg width="100%" height="100%"> <defs> <pattern id="polka-dots" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse"> <circle fill="#bee9e8" cx="50" cy="50" r="25"> </circle> </pattern> </defs> </svg> No pattern will yet be visible, but that’s because we’ve defined it without actually applying it to anything. Let’s change that by applying it to a <svg width="100%" height="100%"> <defs> <pattern id="polka-dots" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse"> <circle fill="#bee9e8" cx="50" cy="50" r="25"> </circle> </pattern> </defs> <rect x="0" y="0" width="100%" height="100%" fill="url(#polka-dots)"></rect> </svg> Crucially, you’ll see the Check out the demo below: A More Complex SVG PatternFor a more complex example we’re going to leave hand-coding behind and generate a pattern using a third party tool. We’ll use heropatterns.com, a website which allows you to select predefined SVG patterns, alter their colors and attributes, then copy the generated code. I’m going to use the jigsaw pattern: Instead of copying the generated CSS in its entirety, I’m going to copy just the The svg code that we set up will be almost exactly the same as our
previous example. The ID within the So where, in our last example, we defined a 3. CSS Tiling Vs. SVG Patterns😀 CSS tiling pros:
😡 CSS tiling cons:
😀 SVG pattern pros:
😡 SVG pattern cons:
4. SVG Pattern ToolsTake a look at these four resources, which can be really useful for generating actual code and ideas!
5. Browser SupportSVG is a widely supported technology, even in older browser such as IE9. Some SVG features, however, don’t enjoy support to such an extent, and there really isn’t much information available for the specifics of From my own tests I can tell you that modern browsers on both Windows and Mac OS all dealt with SVG patterns just fine. Even down to IE11. ConclusionLet’s sum up the key points of this tutorial.
Learn More
Did you find this post useful? Adi Purdila is a web design instructor for Tuts+. With over 100 courses and 200 tutorials published to date, Adi's goal is to help students become better web designers and developers by creating content that’s easy to follow and offers great value. Being self-taught himself, Adi strongly believes that constant learning (academic or otherwise) is the only way to move forward and achieve your goals. When not typing away at his keyboard, he loves woodworking and caring for his ever-growing family of rescue pets. You can stay up to date with what he's doing by following him on social media or visiting his website at adipurdila.com. |