Browsing Tag: SVG

    web design

    SVG Generators — Smashing Magazine


    About The Author

    Juggling between three languages on a daily basis, Iris is known for her love of linguistics, arts, web design and typography, as well as her goldmine of …
    More about

    In a new series of posts, we highlight some of the useful tools and techniques for developers and designers. Last weeks, we’ve covered CSS auditing tools, CSS generators and accessible front-end components. This time around, let’s look at SVG generators — for everything from shapes and backgrounds to SVG path visualizers and SVG → JSX generators.

    Table of Contents

    Below you’ll find an alphabetical list of all SVG generators listed below. Skip the table of contents, or just scroll down to explore them one-by-one. Also, subscribe to our newsletter to not miss the next ones.

    SVG Background Generators

    A cool background graphic can draw attention to a blog post, enhance your social media profile, or simply freshen up your phone’s home screen. To make creating abstract and colorful backgrounds a breeze, Moe Amaya’s project Cool Backgrounds now unites the some great background generators in one place.

    Cool Backgrounds overview
    A gradient topography generator, with smooth layered shapes. (Large preview)

    Generative Doodle Patterns Generator

    What can you create out of basic geometric shapes? According to Sy Hong and Ye Joo Park, entire worlds! The designers got together to create Tabbied, a little tool that generates colorful geometric doodles from already pre-made presets.

    Funky generative doodle patterns for abstract and vibrant imagery. (Large preview)

    First, you select a preset; then you can customize colors and choose settings such as frequency of a pattern, the actual grid and colors, and finally download the design as a PNG file. Need to get more advanced? Patternpad, Paaatterns, Repper and MagicPattern have got your back, too.

    SVG Filters Color Matrix Mixer

    SVG filters (and CSS filters) are often used to refine bitmap images via blur or color manipulation. However, they can do much more than that. An SVG filter is defined within a <filter> element and we can use one or more filter primitives within it. But just like SVG filters are very powerful, so it can be difficult to find just the right combination of those filters to achieve a desired visual effect.

    SVG Filters Color Matrix Mixer
    SVG Filters Color Matrix Mixer: when you need to enhace your images just a bit.

    SVG Color Matrix Mixer is a little tool by Rik Schennink that allows you to visually generate complex color matrix filters for any component on the page and then use the feColorMatrix SVG filter as a value for the CSS filter property to change the color of your HTML elements. The tool also provides a snippet of code for the filter to apply right away.

    SVG Filters Builder
    SVG Filters Builder, a visual tool for pretty much all nerdy SVG filtering needs.

    Need something way more sophisticated? Well, you can also use JustCode SVG Filters for basic and complex effects and SVG Filters Builder, a visual tool for pretty much all nerdy SVG filtering needs.

    SVG Repeating Patterns Generators

    Now, there are plenty of further options for SVG patterns — for example for repeating background images. HeroPatterns provides dozens of repeating patterns that would work well as a background images, tiles, or textures. You can adjust the foreground and background colors as well.

    Wowpatterns features literally thousands of themed vector patterns. Available for free. (Large preview)
    • Wowpatterns features literally thousands of freevector patterns, based on shapes, organic shapes as well as themes, such as animals, beach, city and people, festivals, florals etc.
    • PatternMonster includes 180 patterns, and you can filter them by mode and color, and even search for specific ones.
    • PatternFills includes plenty of black-and-white patterns, also available from the command line,
    • Plain Pattern allows you to upload an SVG shape (or use one of the existing ones) and it creates a repeating pattern which can be exported as SVG.
    • Patternify is a CSS Pattern generator that allows you to define a pattern in a 10×10 grid, preview the outcome, and download PNG or CSS. If you need a bit of inspiration.
    • MagicPattern provides a library of pure CSS background patterns like ZigZag or diagonal ones.
    PatternFills with a selection of black-and-white generative patterns. (Large preview)

    SVG Squircicle Maker

    There are squares, there are circles, and apparently, there are also squircicles! George Francis’s Squircley is a generator of organic shapes for any kind of visuals or background images. You choose the rotation, the scale, the “curvature” and the fill color, and the tool takes care of the rest.

    SVG Squircicle Maker
    SVG Squircicle Maker generates organic shapes and blobs. (Large preview)

    The generator exports SVGs which they can be dropped straight into your HTML/CSS code, or used in your design application. Just a fun little application to use. If that’s not good enough, you can also use GetWaves to generate SVG waves, or Blobmaker to generate some fancy blobs.

    Haikei app
    Haikei, a sophisticated tool to generate SVG assets of any kind. (Large preview)

    If you need a more advanced editor to generate SVG assets, from layered waves to stacked waves and blob scenes, Haikei is a fully-fledged tool with all sorts of generators, with assets available as SVGs and PNGs.

    SVG Geometric Shapes Generator

    To stand out from the crowd of a myriad of websites out there, we can define one unique thing, the signature, that brings a bit of personality into our digital products. Perhaps it’s a little glitch effect, or a pencil scribble, a game or unusual shapes. Or, it could be a set of seemingly random geometric flow lines.

    Flow Lines Generator
    Flow Lines Generator produces random geometric lines. (Large preview)

    Flow Lines Generator produces random geometric lines, and we can adjust the formulas and distances between the shapes drawn, and then export the outcome as SVG. Perhaps every single page on your site could have a variation of these lines in some way? It might be enough to stand out from the crowd, mostly because nobody else has that exact visual treatment. It might be worth looking at!

    SVG Section Dividers Generator

    Whenever you have a few sections on a page, it’s not uncommon to separate them with a slight background color change. However, we can use any kind of shape as a more funky divider between these sections. ShapeDivider allows you to generate custom shape dividers and export them to SVGs. You can choose one of the 10 presents, define color, adjust width and height and a few other settings and preview the results in real-time on narrow and large screens.

    ShapeDivider generates funky dividers between sections. (Large preview)

    SVG Waves Generators

    Apparently, section dividers require quite a bit of attention these days — to the point that a huge splash of wave generators has been released over the last couple of years, deserving a separate section on its own. SVGwave is one of them. You can adjust the colors, layers and a few settings, pick a randomly generated option as well and export it to SVG or PNG. Getwaves is similar, but provides a bit more granularity with shapes.

    SVGwave, a sophisticated solution for a not-so-sophisticated task: generating waves.

    Need something a bit more sophisticated? Wavelry allows you to choose between sharp, linear and smooth waves, and SVG Gradient Wave Generator goes even further allowing to adjust amplitudes, smoothness, saturation and hues. Finally, provides not only an option to generate waves, but also animate them. So if you need any waves at all in your designs, you should be pretty much covered.

    SVG Gradient Wave Generator
    SVG Gradient Wave Generator with options to adjust smoothness and amplitudes.

    SVG Woodworking Patterns

    Amelie Wattenberger has released a little tool Kumiko Generator that helps generate so-called kumiko patterns, patterns used in an ancient Japanese woodworking technique, which involves slotting together many tiny pieces into a lattice. Once you upload your image, you can play with a number of pre-made patterns, and export an SVG result.

    Kumiko Generator
    Woodworking meets SVG, a lovely generator that uses Japanese patterns.

    Maks Surguy has been collecting SVG generators like this one as well, so if you are looking for similar generators, or perhaps something around isomorphic grid, mosaic, ridge line charts or city roads, you’ll find a number of such tools in Maks’ collection.

    SVG Warping Generator

    If you’d like to play with SVG text by warping, bending or distorting it, doing so manually might be quite time-consuming. Warp SVG allows you to adjust the number of anchor points to drag them for warping, but you can also adjust the smoothness level to ensure the outcome doesn’t appear broken. By holding Space , you can adjust the text around the canvas. The entire code is also available on GitHub.

    SVG Warping Generator
    Warp SVG allows you to bend, warp and distort SVG text, if necessary.

    SVG Path Visualizers

    Can you read and visualize SVG? Probably not. But if you need to fix something quickly without having to use an SVG editor, or adjust a color of a shape, or remove a shape altogether, it might be a very good idea to understand how an SVG illustration is actually drawn on the screen. That’s where SVG Path Visualizer can help. You can enter an SVG path data (thats the string inside the d attribute) and the tool explains the magic happening behind the scenes in a human-understandable language.

    SVG Path Visualizer
    SVG Path Visualizer explains exactly how an SVG illustration is drawn by the browser.

    Once you understand how SVG paths are drawn, you can use an SVG Path Editor to slightly adjust the paths. Alternatively, if you need to programmatically adjust SVG paths, you can use svgpathtools, a collection of tools for manipulating and analyzing SVG Path objects and Bezier curves.

    SVG Cropping Tools

    What if you’ve received a couple of SVG files from an illustrator or a third-party, but then realize that it contains quite a bit of blank space around the illustration, causing unnecessary empty space around the illustration once placed on a page? Or perhaps the images are all in slightly different sizes, and you need to normalize them? Of course, there is a tool just for that.

    Steve Dennett’s SVG Crop allows you to remove blank space automatically. You upload an SVG file and the tool finds the dimensions of the SVG contents and manipulates the viewBox of the SVG accordingly. You can upload multiple SVGs at a time, and then copy the SVG into a clipboard, or download cropped SVGs as a .zip-file. Sometimes we’ve seen strange artifacts around colors when multiple images were uploaded, but even then, you’ll know exactly how to adjust the viewbox to remove blank space around the image.

    SVG Crop
    When you need to adjust the cropping manually: SVG Cropper.

    if you’d need a more refined control of cropping, with additional options for cropping style — circle, polygon, custom shape, to name a few — Maks Surguy’s SVG Cropper is a great alternative. You can drag the handles of the canvas to define just the right viewbox but also opt-in for closed paths only, as well as clean paths, lighten them and simplify them.

    SVG Polygon Generators

    Compared to waves, polygons are slightly easier to build — but you don’t have to build them on your own either. SVG Polygon Generator allows you to define the number of sides, radius, spacing and it generates a <polygon> SVG element for you.

    SVG Polygon Generators
    Just a simple generator of SVG polygons.

    SVG Data Visualization Generator

    So you have collected a lot of data, now sitting comfortably in pages and pages of spreadsheets. To make sense of the data and explore it more comfortably, it’s probably a good idea to turn it into some sort of a visualization. That’s exactly where RAWgraphs can help us. You insert the data, choose one of the available visual models — sunburst, circular dendrogram or multiple convex hull, for example, or build your own — tune your chart and voilà, the SVG will be generated for you.

    RAWgraphs takes care of visualizing spreadsheets with a series of predefined presets.

    The RAWGraphs team also provides a series of video tutorials on how to use the tool, a command line utility and a gallery of the visualizations created with RAWGraphs. Under the hood, the tool uses D3.js, which on its own is a remarkable JavaScript library for manipulating documents based on data.

    JPG/PNG → SVG Transformation

    What if you have a bitmap image, and you’d like to transform it to a vector counterpart, perhaps to slightly animate it? It’s impossible to “convert” one into another, but we can trace them to produce a vector alternative. Fortunately, there isn’t a shortage of tools that allow you to do just that — and every vector editor will have some sort of a feature like that. By default, many of these tools will use Potrace, or a similar library.

    SVGurt, an open source image to SVG transformation tool with a lot of knobs and controls.

    PicSVG is one of the many online tools out there. You can upload an image up to 4 Mb in size, and the tool will try to trace the image for you. SVGurt additionally provides plenty of knobs and controls to adjust the SVG by removing some noise, filling the gaps, and refining strokes. It’s also available as a CLI tool.

    You can even take it a step further with dynamic SVG placeholders, by generating small SVG placeholders, animating them and transitioning from them to an actual image with a fade-in CSS transition. Also available as a gatsby-image component. A little bit too much overhead? Well, Blurhash is a great alternative, too.

    SVG → JSX Transformation

    To use SVGs in React, we need to replace SVG attributes with their JSX-valid equivalents. Obviously, there are a couple of tools that take care of this transformation for you. SVG to JSX is one of the simple online tools that is available offline, and can be installed as a PWA from the URL bar. Additionally, SVG2JSX allows you to choose between functional/class flavor of your component, single or double quotes and a few other settings.

    SVG2JSX transforms SVGs to JSX-valid equivalents.

    SVGR provides additional flavors for React Native and TypeScript, allows to replace attributes values and add SVG props, provide a Prettier config as well as optimize SVG along the way. Of course it’s also available from the command line, for Node, Webpack and as VS Code Extension. And just in case you need a thorough tutorial, How to use SVGs in React provides all the details in one single article.

    SVG Favicon Generator

    Creating a simple, letter-based favicon usually takes up more time than it should. Hossein Sham knows this from experience, so to ease his life — and yours too — he built a free Favicon Maker that makes creating a favicon a matter of seconds.

    SVG Favicon Generator
    Doing just one little thing, but well enough: SVG Favicon Generator.

    The Favicon Maker helps you make letter- and emoji-based favicons, either as SVG or PNG, depending on your preference. You can select a letter or emoji, a font (Google Fonts are supported), font size, bold or italic variant, as well as the color and shape of the background. Once you’re happy with the result, you can either copy the code directly into your project or download the SVG or PNG file. Need a bit more guidance? How To Favicon in 2021 will have you covered.

    SVG Sprites Generator

    In times of HTTP/2 and looming HTTP/3, conversations about CSS sprites might seem a little bit outdated, to say the least. However, if you have literally dozens of icons in your interface, loading them fast, and loading them at the same time, might be critical — and that’s when good ol’ CSS Sprites might still be useful. Probably not for PNGs though, but for SVGs — and then use <use> to avoid many SVGs clogging up your markup.

    SVG Sprites Generator
    svg spreact, also avaiable as a loader for Webpack and standalone npm module.

    With svg spreact, you can drop SVG files to create a sprite, and the tool will tidy the SVG, optimize it, produce a sprite along with the markup and a demo on CodePen. Alternatively, you can also use an SVG sprite loader with Webpack or svg-sprite npm module.

    SVG Icon Transitions Generator

    So you’ve got two SVG icons and want to create a transition between them? Then the Icon Transition Generator is for you. You upload your SVG icons, and the browser-based tool exports a single SVG file that includes the JavaScript code for the animation. To adjust the transition to your project’s needs, you can select the type of interaction (hover or click) and the kind of animation (scale or rotation).

    SVG Animation Tools

    The beauty of SVG lies in its nature: with plain text in front of you, you can animate, transition and morph paths as well as composite animations by working directly with the code. However, we don’t have to write each animation from scratch. Vivus Instant is a simple tool that allows you to animate SVG strokes (thanks for the tip, Chris Mickens).

    SVGArtista is a free tool by Sergej Skrjanec and Ana Travas that already includes some basic fill and stroke animations. You can define an animation easing and animation direction, duration and delays. The generated code can be minified, and it uses Autoprefixer by default as well.

    SVG Animation Tools
    SVGator, a sophisticated tool with plenty of features and presets.

    SVGator is a dedicated editor for SVG animations with plenty of dedicated panels for everything from skewing to stroke path and filters, but in a free version the timeline is restricted to 10 seconds, and only easing functions are available.

    If you’d like to play directly with the code, GSAP is a fantastic tool to animate with JavaScript — be it SVG, CSS properties, React, Canvas or anything else. Plus, you can also look into SVG.js which is lightweight and dedicated specifically for manipulating and animating SVG. And if you are looking for the After Effect-alike quality of animations, Lottie is definitely worth looking at — both for the web, and for iOS, Android and React Native.

    Simple Online SVG Editors

    If you just need to fix something in an SVG file, but don’t want to use large applications, Boxy SVG or Editor Method might be just what you are looking for. It’s web applications with basic SVG editing features and a visual editor.

    Simple Online SVG Editors
    One of the many, but does its jobs well: Boxy SVG, a free online SVG editor.
    • Vecta is slightly more advanced, with collaboration tools for teams, and also supporting diagrams, Autocad drawings, Vision stencils and drawings.
    • MacSVG is a light open-source macOS application for SVG editing and animations
    • SVG-Edit is a fully-fledged SVG editor for sophisticated SVG editing.

    SVG Compression

    By default, exported SVGs might contain plenty of meta-information and unnecessary details, be it empty elements, comments, hidden paths or duplications. Jake Archibald’s SVGOMG cleans up SVG files for good. You can specify the precision level, and choose which feature you’d like to remove from SVGs (there are plenty of them), and which you’d like to keep.

    SVG Compression
    SVGOMG cleans up SVG files for good.

    If you need to use the tool from the command line, SVGO is a Node.js tool that can be configured and used as a part of your build process, with every feature available as a default plugin. There are also other ways to use SVGO, e.g. as a GitHub action, webpack-loader, VS Code Plugin, Sketch plugin or Figma plugin.

    SVG Assets Manager

    So you have plenty of SVGs scattered all across your machine. How do you keep track of them? How do you know what is where, and how do you find one easily? SVGX is a free desktop SVG asset manager which allows you to keep all SVGs in one place. You can bookmark, search and preview SVG icons, live-edit the SVG markup, preview the icons in dark mode and copy/paste markup and CSS with one click. By default it also uses SVGO for SVG optimizations. Available for Mac and Windows.

    Iconset SVG Organizer
    Iconset SVG Organizer is a free desktop SVG asset manager.

    If you need an alternative, Iconset is similar, but without the code part. You can drag icons from Iconset directly into Sketch, Figma, Adobe XD and pretty much anything else, without plugin or extension installs. Plus, you can also sync icons across devices via Dropbox or similar services, and publish and share your icon sets. Available for Mac and Windows.

    And of course if you need just the right icons, you’ll probably find them on SVGRepo, Iconfinder and Vecteezy. All these sites provide literally thousands and thousands of icons, free and commercial, for pretty much all the needs you might have.

    Code Snippet Generator

    Not really a tool for anything SVG-related, but quite handy when you want to share a snippet of code — and make sure that it looks… lovely. takes care of most of the tasks. You can choose between a couple of presets, dark mode or light mode, padding and the language (which can be auto-detected as well). The output is a high-resolution PNG you can put right into the Slack channel right away. generates high-resolution images for your code snippets.

    Wrapping Up

    There are literally hundreds of resources out there, and we hope that some of the ones listed here will prove to be useful in your day-to-day work — and most importantly help you avoid some time-consuming, routine tasks. Happy generating!

    Smashing Editorial
    (cm, il, vf)

    Source link

    web design

    What Is SVG Animation? — Smashing Magazine


    We’re talking about SVG Animation. How can vector images, JavaScript and CSS all work together to provide engaging motion graphics? Drew McLellan talks to SVG expert Cassie Evans to find out.

    Today we’re talking about SVG Animation. How can vector images, JavaScript and CSS all work together to provide engaging motion graphics? I spoke to SVG expert Cassie Evans to find out.

    Show Notes

    Weekly Update


    Photo of Cassie EvansDrew McLellan: She is a front end developer and speaker with a background in graphic design and motion design. She got started with coding back in the days of MySpace and Neopets and is on a mission to make the web more whimsical again. She currently works at Clearleft in Brighton UK, and can usually be found tinkering with SVGs on CodePen. So we know she’s a skilled developer and SVG expert, but did you know she was National Junior Wing Walking Champion for three years in a row? My smashing friends, please welcome Cassie Evans. Hello Cassie. How are you?

    Cassie Evans: I’m smashing, thank you.

    Drew: I wanted to talk to you today about one of your passions, which is SVG, and in particular the animation side of things. I think most people listening to this podcast will have heard of Scalable Vector Graphics in some shape or form. I know I’ve used them heavily with things like logos and icons in recent years, but let’s not assume. So for anyone who isn’t really up to speed with SVG, what makes it different from other ways of adding graphics to a webpage?

    Cassie: So, a lot of the clue’s in the name, of course. So, SVG stands for Scalable Vector Graphic. So, these are first the images that can be any size. You can make them really, really small or really, really big, and they’ll retain image quality and won’t get pixelated like JPEGs or PNGs.

    Cassie: You can also make them really, really small, so small in file size. So, everyone’s kind of added a PNG to their site that’s a million megabytes and seen what that does to page load. So, you can add all sorts of cool illustrations and stuff to your site without impacting on performance too badly, and also you can animate them so that’s the most exciting bit. With JPEGs or PNGs, if you wanted to animate them or move bits of them around, you’d have to cut them out into little pieces or kind of layer them on top of each other, whereas with SVGs you’ve got actual elements in the SVG. It’s got a DOM structure just like HTML does.

    Drew: So, I guess in a world of mobile devices with different screen sizes and different pixel densities and sort of constrained data connections, SVG really is a format that’s more suited to the modern web than the old graphic styles. Is that fair?

    Cassie: Yes, definitely.

    Drew: Most images are of course sort of binary based, but SVG is totally view sourcable, isn’t it?

    Cassie: Yeah. So, that’s really exciting because you can actually right click and view source on an SVG and you can traverse around the DOM and kind of see what you’ve got and kind of get to learn it that way, which I find that really great. It feels a lot like the old web, like being able to go to a website and view source on it and see how it’s put together.

    Drew: SVG kind of feels more sort of native and integrated into the web than things like maybe Canvas or even back in the day Flash, which of course flash was scalable vector graphics, wasn’t it? In its own way. And those technologies feel very much like a black box that’s encased on the page that you can’t sort of get in or out of. SVG is a lot more integrated isn’t it?

    Cassie: Yeah. It’s funny that you’d say that because I always refer to Canvas as a black box when people are asking whether they should use Canvas or SVG for something. I think a lot of the time, obviously it depends on the use case, but one of the things with Canvas is if you don’t have JavaScript for some reason, if your code fails, you end up with a little black box with nothing in it. So you could create this crazy infographic, all sorts of things going on inside this Canvas element, and then you just lose it all. Whereas SVG, it’s a lot more aligned with progressive enhancement, so you can have an animated SVG, maybe that’s animating using JavaScript, but then without JavaScript you will still have the illustration. You’ll still have the SVG there.

    Drew: And SVG isn’t new to the web, is it? It’s been around for quite a while.

    Cassie: It has, yes. It’s been around for longer than I’ve been doing stuff on the web.

    Drew: And it certainly seems to be coming into its own a lot more with things like animation, like you’ve been saying, but also as we were mentioning, the way that it scales just makes it perfectly suited when we’re designing sites that might be viewed on a retina display with double the pixel density, or need to be delivered over a mobile connection where you want things to be as performant as possible. So we know SVG has got a DOM, you mentioned that. Does that mean that the things in it can be manipulated with code?

    Cassie: Yes, so that’s the most exciting thing. You can get at SVG elements and you can animate them and move them around just like you can with HTML DOM elements, and it also means from an accessibility perspective, SVG has a DOM so you can traverse that DOM if you’re using a screen reader or something, so you can make SVG graphics very accessible to screen readers.

    Drew: Yes, so I was going to ask about the situation with accessibility because classically, graphical stuff on a page is one of the most difficult things to make accessible. So are there sort of attributes that you can add to hint? Can you use the ARIA stuff in SVG or how does that work?

    Cassie: Yeah. You can use ARIA labelledby, but you also have title and description tags that you can put inside an SVG.

    Drew: That’s incredible and in terms of sort of motion preferences, because that’s something that we’ve seen recently with a media query in CSS to see that the user prefers reduced motion and you can change your animations and things based on that, is that something you can do in SVG or does it have to be implemented a little bit more manually?

    Cassie: Well with SVG people often talk about SVG animation like it’s its own separate kind of special thing and of course we used to have SMIL. We still do have SMIL technically. It was getting deprecated, but it’s actually not being deprecated anymore. It’s just not really as widely used and not worked on anymore, but we used to have SMIL and that was what most people refer to as SVG animation. Whereas now, SVG animation could mean any of those things. It could mean SMIL, it could mean CSS animation, or it could mean animating using JavaScript or a JavaScript animation library. So, there’s lots of different options but with CSS animation and JavaScript animation the option to use prefers reduced motion is there and should definitely be used.

    Drew: So you mentioned CSS animation and of course there’s a certain amount that we can do, like with HTML elements and CSS animation, to create graphics and motion on a page. SVG just like blows that out of the water in terms of flexibility doesn’t it?

    Cassie: Yeah, definitely. I think people make amazing things with just CSS, like Lynn Fisher makes really amazing things. There’s all sorts of people making crazy CSS only illustrations, but it takes a lot of time and the handover for that is pretty impossible. Like if you imagine a designer giving you an illustration and asking you to recreate that in a CSS, that would be a large ticket. So SVG kind of makes it a lot more feasible to have these interdisciplinary teams and pass things over from one person to another. So you can have an illustrator or a designer create an illustration in a vector graphics program like Illustrator, and then they can pass that SVG over to a developer who can animate it.

    Drew: And I suppose that would fit quite well into people’s established workflows. We’re using things like Git, because SVG is text-based, isn’t it? So presumably, committing SVGs into Git you get all that ability to diff and merge and all those sort of powerful features that you get with other text-based stuff. Is that right?

    Cassie: Yeah, exactly.

    Drew: So it’s kind of like, well I say kind of like, it absolutely is graphics expressed as code.

    Cassie: Yes.

    Drew: Isn’t it? SVG?

    Cassie: It is.

    Drew: And it’s quite a lot like HTML in its syntax. It’s another XML based language, isn’t it?

    Cassie: Yep.

    Drew: So it has tags and attributes and nested children and all that sort of stuff that your average web developer is going to be used to.

    Cassie: I think that that’s what I love the most about SVG is I’m really into creative coding and also teaching people, and I found that teaching people who are more of a creative leaning, they sometimes get a little thrown off when you immediately jump in with JavaScript or Python or something like that for creative coding, but without fail I’ve managed to get anyone that I taught on board with SVG because it’s got this really approachable entry points because it does look like HTML. So, you can give someone with an understanding of HTML and how to build websites SVG, and it looks the same, but it’s the graphics instead of documents and then you can animate that with CSS to start off with which is also a little bit more comfortable, and then you can kind of progress to animating it with JavaScript. So it’s a really good learning curve.

    Drew: And of course it can be dynamic. It’s not just a case of creating motion. You can actually make the properties of it dynamic. So, one of the interesting things I’ve seen SVG used for, and it’s a grand term, but like data visualization, DataViz, and drawing graphs and charts and of course things like dashboards that we seem to have everywhere these days. SVG is sort of perfect for that isn’t it?

    Cassie: Yes, definitely. SVG is great for DataViz. All the way from kind of small DataViz up to D3 which is very well known DataViz library that uses SVG under the hood. But you could also just, if you’ve got a little bit of data that you wanted to show on a web page, you could create a chart in a graphics editing program and then you could just use JavaScript to change those values and kind of change how your graph looks. So you don’t have to go all in with a massive database library. You can kind of just start off small.

    Drew: Obviously sort of traditional graphs and charts and things are just sort of the tip of the iceberg when it comes to ways that SVG can help with data visualization. I saw you had an interesting project that you did at Clearleft with your solar panels on the roof. Can you tell us a little bit about that?

    Cassie: That project was actually meant to be me learning D3 and then I got very distracted. We have some solar panels on the roof of our office, which I miss thoroughly actually it’s been so long, but yeah we’ve got some solar panels on the roof and I found out shortly after starting working at Clearleft that we had an API that was attached to the solar panels that you could hook into. So I was like…

    Drew: Amazing.

    Cassie: Right. I need this to be my side project, and I had a little look at what we got back from the API and amongst the data there was the amount of CO2 saved and they measured the amount of CO2 in trees.

    Drew: Okay.

    Cassie: So I was immediately like, wow, well we’re going to have to plot this somehow, but I want to measure it in trees because that’s such an interesting way of plotting this. So, all of my D3 aspirations went out of the window and I sat down in illustrator and recreated an illustration of our office building and created a jungle of trees and plants and stuff, and then I’m looking at how much CO2 we have saved and then kind of growing in these plants and vines and stuff. Yeah, it’s great. It’s really good to check back occasionally as well and just see how much the jungle’s grown.

    Drew: It’s an amazingly creative way of visualizing that data, whereas if you were relying on traditional software for creating graphs and charts and things, there’s never going to be a function to create an office building with trees on top. That that just doesn’t exist, but then using JavaScript and using SVG to be able to generate those graphics and using the JavaScript to manipulate them to adjust the values that are being shown, you can come up with something completely new in a completely novel way of communicating an idea to the person using the site. So, we know we can hand codes the markup for SVGs, which me as a developer, I think that sounds great because I can go in and I can be very precise, but that is probably a technical skill that isn’t going to suit everybody, particularly those whose strengths being more visually creative than actual coding. So are there other ways to author SVGs or do you have to just do it by hand and in a text editor?

    Cassie: I think I wrote a hamburger icon once just from the top of my head and I was super proud of myself, but the rest of the time I create SVGs in Illustrator or other alternatives. Affinity designer is really good. Illustrator has obviously the Adobe pricing structure, which can be a little bit out of people’s budgets, but Affinity Designer is like a once off purchase and it’s pretty good actually, and the SVG markup that you get out of it is good which is the most important thing. But yeah, I don’t think there’s anyone apart from, it’s a guy called Blake Bowen on the GreenSock forums, and I think that he could probably hand write SVG path data, but I don’t think it’s a thing that everyone can do. I don’t think that it’s a thing that we should be aspiring to do. It’s quite verbose.

    Drew: So being a lightweight by using a dedicated graphics tool to author SVGs, it’s a perfectly valid route.

    Cassie: It’s fine. Choose your battles.

    Drew: Are there any tools out there that are free for filtering SVGs or is it all commercial?

    Cassie: I think Inkscape is free, but yeah, I would really recommend Affinity Designer. I think for the kind of cheaper tier, I think it’s worth paying a little bit of money towards these tools because it can be quite frustrating working with clunky vector graphics tooling.

    Drew: In terms of the output, the SVG output that you get from these tools, is it all the same? Do they all just basically generate the same SVG or some better than others?

    Cassie: Yeah, that’s a very good question. I find Illustrator is a lot better than other tools, but it’s not something that should hold you back or make you feel like you need to spend that money. So at the end of the day you’ll get some markup out, some editors you might need to do a little more tweaking than others but most of them you will get workable SVG code out of it.

    Drew: I’ve found personally when I’ve tried to create SVGs, and I’m not graphically skilled, that I get varying results depending on how I actually draw something in say Illustrator. Presumably when it comes to thinking about how something’s going to be animated, it matters more how you construct your shapes in the editors. Is that fair?

    Cassie: Yeah, definitely. Also SVG has an implicit drawing order, so it’s not like HTML. So with HTML, you can use that index to kind of move things around and put things underneath or on top of other things, whereas with SVG the order that it is in the code will be the order that it is displayed on the web page. So that’s something to kind of keep in mind when you’re drawing out an SVG is getting your layers in the right order and then anything that you want to move as one unit you should wrap in a group and anything that you want to move separately from something else you need to make sure that it’s actually a separate shape.

    Drew: Yeah, so I mean by getting your layers in order there you’re literally talking about the layers palette in Illustrator and dragging the things around before you export, is that right? Just getting them in the correct order and then exporting.

    Cassie: Yes.

    Drew: And once you have exported it are there tools that will help sort of optimize or, because I know with PNGs, there’s a whole load of things I use to cut all the craft out of the file and reduce the file size. Are there’s similar things for SVG?

    Cassie: Yeah. There’s a tool called SVGOMG, which I use a lot, which is great and you can use that for batch processing. There’s terminal commands for it, but you can also, there’s a Gooey in the browser, which I really like for large illustrative SVGs because I think it’s nice to build it into, say your build process, if you’re dealing with a huge load of icons that you all want processed in the same way, but if you’re dealing with an illustrative SVG, it’s nice to be able to use the gooey because you can flip between the code view and the visual view and you can just make sure that the things that you’re changing in the settings aren’t visually affecting your SVG in a negative way and aren’t affecting the code in a way that you don’t want it to.

    Drew: Presumably these tools, things like Illustrator, are great for creating graphics, but they’re not going to help us at all with animation are they? That all happens once we get the SVG and put it into a webpage.

    Cassie: Yeah.

    Drew: So what does that process look like? I mean, obviously it’s difficult to talk about animation too much on an audio podcast, but in terms of just the sort of process you’d go through. You put your SVG into a page, what happens then? How do you address parts of it or what do you do to start working with it?

    Cassie: So it’s very similar to animating HTML DOM elements in that you need to be able to target the elements themselves. So that would involve putting classes or IDs on them so that you can target them, and then you can either use CSS for animation. There are some issues with transforms with CSS that are still kind of being ironed out a little bit. So I tend to recommend CSS for experimenting and playing with SVG animation. When it comes to SVG animation and production I will usually recommend GreenSock, which is a JavaScript animation library, and yeah, well with GreenSock and with CSS you basically just get the SVG elements and then do stuff to them.

    Drew: So do you have full access to interacting with the complete range of JavaScript APIs and things like scroll events and mouse events and resizing and intersection and that whole browser environment presumably you’ve got at your disposal, to then have your animation interact with and respond to.

    Cassie: Yeah. So anything that you would use in normal JavaScript, so like mouse events or scrolling, that kind of thing, you can look for that and then do things to your SVG on those events. You’ve also got SVG specific methods and stuff, like get PATHlink I think is one, stuff like that so there’s specific SVG methods that you can kind of play around with.

    Drew: So you could do things for example, like start an animation as an SVG comes into view on the page if it’s scrolled out of place and stop it when it gets scrolled away and restart it if it comes back into view and that sort of thing.

    Cassie: Yeah. There’s actually a new GreenSock plugin called ScrollTrigger and previously I think a lot of people have used ScrollMagic for scroll animations, but that was a different library to GreenSocks, so they had no kind of affiliation with each other so you were just mashing together two different libraries, one that did animation and one that did scroll events. Whereas GreenSock have now just made a scrolling plugin that works with GreenSock and it has one event listener. One scroll listener. Yeah. So it’s very, very performance and I’ve played around with it recently and it’s great. It’s really easy to use.

    Drew: Is that automatically buffered so you’re not completely overrun with scroll events being fired at your code and all those sorts of traditional problems?

    Cassie: Yeah all of the traditional problems, they’re kind of doing all the heavy lifting in the background for you, which is good.

    Drew: Fantastic. Would GreenSock be the tool then, the sort of library, that you’d recommend people to start using if they were looking at SVG animation?

    Cassie: Yes, definitely. Mostly because GreenSock, it’s the only animation library out there that handles SVG transforms consistently cross-browser and that isn’t just something that they do that they’re not focusing on anymore. It’s a constant effort from their part so they’re constantly kind of looking for SVG bugs and fixing things. So it’s very reliable. Definitely.

    Drew: What is the sort of cross-browser situation like with SVG? Is it fairly reliable or are you constantly having to deal with inconsistencies across different browsers and platforms?

    Cassie: If you are animating with GreenSock then you don’t. If you are animating with CSS, yeah there’s quite a few inconsistencies. It’s mostly to do with how transforms are handled. So with HTML DOM elements transforms are measured from the center of them, and with SVG transforms are measured from the top left hand corner, but in some browsers it’s the top left hand corner of the element itself, and in other browsers it’s the top left hand corner of the SVG view box parent. So you can end up, if you’re rotating things around in some browsers, they might end up going in a different trajectory than others.

    Drew: That sounds like most of the animation I’ve ever tried to script. Things going in unexpected directions. We’re used to sort of traditional animation tools, having things like easing options, ease in ease out and that sort of stuff. Presumably that’s something that GreenSock then brings to the table.

    Cassie: Yeah. GreenSocks got a lot of really good easing equations that you can use. Yeah, and they’ve got a great ease visualizer so you can have a little look at how will the eases work.

    Drew: That’s really useful, and again that’s something I always struggle with. It’s like, I know I should do something. It shouldn’t just move linearly from A to B, but what do I do? So yeah, being able to visualize stuff is really handy.

    Cassie: When I started making animations I made a lot of space animations because I hadn’t quite figured out how easing worked yet, so in space everything does move linearly because it’s just floating around. It doesn’t have gravity to contend with, so I made lots of rockets, planets bobbing around and it was fine.

    Drew: I mean I guess you, being such an SVG enthusiast, you probably see people they’re putting SVG to all sorts of creative uses. What sort of things, just to get the juices flowing, what sort of things have you seen people do with SVGs that has been particularly impressive or creative?

    Cassie: I think one of the things that I love with SVG is the fact that you don’t just have to use it for illustrative SVG animations by themselves because it is XML based markup, just like HTML. You can kind of mix it in with the HTML DOM. So, I think it’s a bit of a nerdy thing, but my favorite examples of SVG animation are when people mix SVG animation with semantic DOM elements, so when you have a button that is a proper button but it’s got some SVG icon illustration in it so that when you click that button something joyful happens, and I love that because it’s this perfect marriage of kind of whimsical joyfulness and proper semantic DOM elements.

    Drew: You’ve said in the past that front end development has become very serious in recent times. Has all the fun gone out of the web Cassie?

    Cassie: That’s a very serious question. Has all the fun gone out of the way.

    Drew: Because things used to be a lot more fun, but maybe not as efficient and have we got too serious with it?

    Cassie: Yeah. I think efficiency is a real killer when it comes to adding these little enhancements on. I find that in my day job at Clearleft, I quickly realized that if I wanted to have animations as an extra thing, as like another ticket or something, it was very hard to get sign off on that. It was always the thing that if the project starts being a little bit cramped on time, it’s the first thing to go. But I think that once you’ve got a good understanding of animation and SVG you can just sneak things in to start off with. So when you’re building a component and you see an opportunity for a little bit of animation and you can just add it in and it gets easier because then people start seeing the possibilities and people start realizing that the clients really like that kind of thing, and then you can kind of get a little bit more time to work on it.

    Drew: It is the sort of thing that can just really elevate an experience beyond unsatisfactory or unsatisfying sort of boring transaction to something that gives the user just a little bit of joy and gives her a whole sort of perception of quality and some brand personality as well, I think with animation. There’s a…

    Cassie: Yeah.

    Drew: There’s a lot in terms of brand personality that can be put across with those sort of little touches.

    Cassie: But I think this is something that a lot more people are realizing now as well, not just with SVG and animation, but personality in general, and I think that there’s a lot more weight that’s being given to copy that’s written well and has a bit of personality and illustrations that aren’t just from a stock library that are unique to that company or that person and animations are a big part of that. And I think that I personally feel like we’re seeing more of these websites nowadays and I think that we went through, and are probably still going through a little bit of efficiency first period, but I think as with anything people start getting bored of that and it does seem like a lot of websites suggest being churned out by some corporate mega machine and people are starting to push back, I think. Max Bock made a site recently called the whimsical web and it’s got a lot of personal sites on there that are really joyful for various different reasons and I think we’re starting to see a lot more of that.

    Drew: Is it possible to go too far with adding animation and sort of too much personality perhaps to a site?

    Cassie: Yes. Definitely. I’m not a huge fan of websites that are very, very, whizbang. Like websites that are animation first. You get to the page and everything’s moving and you’re trying to read text as you’re scrolling, but it’s moving while you’re trying to read it. I’m not a fan of that. I really like looking at animation as an enhancement and I think that’s why SVG, I think is so great because you can kind of build an otherwise quite sensible website, but you can have these little whimsical touches throughout it.

    Drew: And it’s crucial, isn’t it, as we mentioned before, the accessibility sort of aspect of things that it is possible to create a nicely accessible SVG, even if it has sort of content, if you’re locked in there, it’s not locked. It’s accessible to screen readers and then hopefully to everyone who visits the site. As I say, it’s hard on a podcast to really get into the practicalities of, well, we can’t show animation or anything, but you’re running an online workshop with Smashing Conference all about SVG, aren’t you?

    Cassie: Yes, I am.

    Drew: It’s the SVG animation MasterClass and that starting on October the eighth and it’s quite an unusual format. It’s two hours on Thursdays and Fridays. That’s an unusual way to do things, isn’t it?

    Cassie: Yeah. I’m actually really happy about that because I’ve done a version of this workshop before. I spent a large part of 2019 putting it together. It was my baby, my passion project, and then I had quite a few workshops booked in and then the situation happened and all of them got canceled. So I got the opportunity to run it twice before the situation, and it was really great but it was a lot of content and it was a full day workshop. About eight hours and you could tell by the end of it people’s brains are just switching off because you’re sitting in a room trying to absorb information for eight hours. So I’m quite excited about this format because it means that I could divide it up into sections that kind of work by themselves and it gives people a chance to learn that and process it a little bit and let it sink in before they get the next load of information. So I think we’re going to get some really interesting things at the end of it just because people have had more time to absorb.

    Drew: So it’s a Thursday and a Friday, a Thursday and a Friday, and then a Thursday to finish it off with two hours on each of those days followed by Q and A. I think that’s right, isn’t it?

    Cassie: Yes.

    Drew: Q and A on each session. What would those attending expect to learn? What should their expectations be in terms of what skills they might pick up?

    Cassie: So it’s more angled towards the animation coding side of SVG animation. So we’ll cover a little bit of getting SVGs out of a graphics editor, and then the whole process from getting the code out through to starting to work with it. So optimizing and adding the right classes and structuring it properly, and then we’ll work on animating SVGs. So we’ll be using CSS. We’ll also be using GreenSock, which is the animation library that I mentioned, and we’ll be covering what I kind of refer to as SVG super powers. So this is stuff that it’s, aside from the animation, it’s the things that you can do with SVG.

    Cassie: So that’s like clipping, and masking, and stroke animation, and filters, and all of that stuff is just so important to understand with SVG because it unlocks all of these kinds of super powers that you can play with. And we’ll also look at performance and accessibility, and also a bunch of the kind of little tips that I’ve picked up and learned along the way. So, little handy tips that I find useful for my workflow, handy tips that help with flashes of unstyled content before you start animating. Little tips like that.

    Drew: That sounds really useful. I looked just before we started our interview and there are still some early bird places available, which is great. So if people are quick they might still catch those and you can register at There’s actually a number of different master classes that are being run at the moment and there are early bird deals and bundled deals on some of them as well. So there’s things like JAMstack, CSS layout with Rachel Andrew, Vue.js, web performance, GraphQL, loads of different Masterclasses and you can find all those at So I’ve been learning all about SVG. What have you been learning about lately Cassie?

    Cassie: Oh, I’ve been recently learning quite a lot about Eleventy. I did a little site redesign recently using Eleventy and I’ve also been doing Andy Bell’s Eleventy from scratch course. So I’m getting quite into static site generators in general at the moment.

    Drew: That’s great. I think we’re all getting into static site generators more as time goes on.

    Cassie: It’s the future.

    Drew: If you dear listener, would like to hear more from Cassie you can of course sign up for this animation Masterclass with Smashing Conf, but also you can find her on Twitter where she’s @Cassiecodes and her personal website is and that links to her CodePen, which is a great place to explore. Thanks for joining us today Cassie. Do you have any parting words?

    Cassie: I would like to say that Smashing and I are offering for free tickets to my workshop. So they are diversity tickets that are going out to anyone that’s underrepresented in tec or going through a tough financial time at the moment. So you can apply for that on the webpage about my workshop and I hope to see you there.

    Smashing Editorial

    Source link