SVGs are one of the most remarkable technologies we have access to on the web. They’re first-class citizens, fully addressable with CSS and JavaScript. In this tutorial, I’ll cover all of the most important fundamentals, and show you some of the ridiculously-cool things we can do with this massively underrated tool. ✨

The moving image below is only 49Kb and has an incredibly high resolution. It's similar to a GIF but instead of showing moving images, it shows moving SVGs!

Getting these to work involves asciinema and svg-term-cli. After uploading the asciinema you can use the tool to download a file that you can immediately click and drag into a README, or you can use this snippet to keep things local:

SVG Shapes

Explore the collection of 120+ basic SVG shapes for your upcoming project.

Simply click on a shape to copy its SVG code to your clipboard.

Follow along with the examples in this in-depth guide to learn how to draw SVG icons and simple shapes by hand.

Myriam Frisano explores the basics of hand-coding SVGs with practical examples to demystify the inner workings of common SVG elements. In this guide, you’ll learn about asking the right questions to solve common positioning problems and how to leverage JavaScript so that, by the end, you can add “SVG coding” to your toolbox. You’ll also be able to declare proudly, “I know how to draw literal pictures with words!”

by amelia wattenberger

I've talked a good bit about SVG's around here and using it to build an icon system. The beauty of is that you can reference just a part of some SVG defined

A fun collection of free SVG generators for gradients, patterns, shapes, textures & cool backgrounds. Plus, some more color tools for web designers.

https://fffuel.co/hhhue/

While it is a bit of an edge case, every now and then I’ll hit a site—yes, even a high profile one—and the CSS will fail to load for some reason. When this happens, inevitably every inline SVG resource on the page will grow to fill the entire width of my viewport, making for a really awkward experience.

Squiggles, scribbles, shapes and... other stuff.
A library of over 70 custom-color elements ready to paste into your project.

SVG to EMF Converter - CloudConvert is a free & fast online file conversion service.

https://graphicdesign.stackexchange.com/questions/60996/illustrator-emf-export-loses-precision

Control the paint order of path and fill using the paint-order presentation attribute or CSS property

In this case, I usually changed the path or width/height of the given element to avoid the stroke going over the filled area too much. But it turns out that you can change the paint order of fill and stroke using paint-order.

The default order is described via the normal value, and it defines that fill will be painted first, then the stroke, and finally the markers. But you can redefine the paint order so that the stroke is not painted over the fill area with stroke fill markers.

In this post we have provided you with some examples and code for ways to make your page load entertaining via SVG loading animations.

https://codepen.io/nikhil8krishnan/pen/rVoXJa

https://codepen.io/BridgetCReed/pen/YpOEVv

https://codepen.io/matchboxhero/pen/bomWGK

Webfont icons — what typographers would traditionally refer to as dingbats — are an important part of modern web development. There are so many advantages to them:

Comment:
I've used https://icomoon.io for years, because of its great selection of free icon fonts and also because it's quite easy to import self designed svgs and turn them into glyphs. It's easy to use and all relevant functionalities are free of charge.

https://web.dev/optimize-webfont-loading/#customize-the-text-rendering-delay

<link rel="icon" href="favicon.svg" type="image/svg+xml">
<link rel="mask-icon" href="maskIcon.svg" color="#90FF00">
<link rel="shortcut icon" href="favicon.ico">

SVG FIRST!
I also suggest you get a good SVG editor that has a proper stripping/minimized save feature. For this I like to use Inkscape:
https://inkscape.org

Boring avatars is a tiny JavaScript React library that generates custom, SVG-based, round avatars from any username and color palette.

SVG isn't just useful for illustrative animation. It's hella handy for UI too.

Uses potrace

http://potrace.sourceforge.net/

Optimising SVGs (scalable vector graphics) for web projects has the dual benefits of reducing the file size and making them easier to work with. But plenty of times I’ve opened up a web project and found that SVG assets could be made significantly smaller with some straightforward optimisations. In this article I’ll share my process for optimising SVG assets, which may help you if you’re a designer or developer unfamiliar with working with SVG on the web.

As a designer, I love coming across fun animations when visiting a site, and I have definitely been seeing more and more of them lately. Animations take illustrations and icons to the next level, making a site that much more engaging. While they are obviously attractive to look at, they also serve a functional purpose, captivating visitors and encouraging them to interact with the content.