Skip to content

SVG

September 29, 2023
February 21, 2016

Scalable Vector Graphics

SVG - Wikiwand
willianjusten/awesome-svg: A curated list of SVG.

SVG Explained in 100 Seconds - YouTube
The ultimate guide to SVG | Webdesigner Depot

Learn SVG
An SVG Primer for Today's Browsers
SVG Primer - W3C Wiki
An SVG primer β€” Scott Murray β€” alignedleft
Scalable Vector Graphics (SVG) 1.1 (Second Edition)

SVG can do that?! (Sarah Drasner) - YouTube
SVG Path Builder

Test Scaling Of SVG Images In Fluid Layouts test browser compatibility

CSS Tricks:
A Compendium of SVG Information | CSS-Tricks
Using SVG | CSS-Tricks
How to Scale SVG | CSS-Tricks
Transforms on SVG Elements | CSS-Tricks
5 Gotchas You're Gonna Face Getting Inline SVG Into Production | CSS-Tricks
Masking vs. Clipping: When to Use Each | CSS-Tricks
A Trick That Makes Drawing SVG Lines Way Easier | CSS-Tricks

SVG | MDN
SVG Tutorial - SVG | MDN
SVG Attribute reference - SVG | MDN

sdras/svg-workshop: Starter Materials for Advanced SVG Workshop
SVG Authoring Guidelines
SVG Tutorial
SVG Basics Tutorials - Scalable Vector Graphics by Hand
KevLinDev - Tutorials - SVG
Javascript Dynamic SVG Examples
Styling And Animating SVGs With CSS – Smashing Magazine

Sitepoint:
SVG Archives - SitePoint
Understanding the SVG fill-rule Property
How to Translate from DOM to SVG Coordinates and Back Again

A List Apart:
Using SVG For Flexible, Scalable, and Fun Backgrounds, Part I – A List Apart
Using SVG for Flexible, Scalable, and Fun Backgrounds, Part II – A List Apart

Sara Soueidan:
SVG Filters: The Crash Course – Sara Soueidan, inclusive design engineer
Understanding SVG Coordinate Systems and Transformations (Part 1) β€” The viewport, viewBox, and preserveAspectRatio – Sara Soueidan, inclusive design engineer
Understanding SVG Coordinate Systems and Transformations (Part 2) β€” The transform Attribute – Sara Soueidan, inclusive design engineer
Understanding SVG Coordinate Systems and Transformations (Part 3) β€” Establishing New Viewports – Sara Soueidan, inclusive design engineer
Art-Directing an SVG Embedded Using – Sara Soueidan, inclusive design engineer
Making SVGs Responsive With CSS – Sara Soueidan, inclusive design engineer
Clipping in CSS and SVG β€” The clip-path Property and Element – Sara Soueidan, inclusive design engineer
Structuring, Grouping, and Referencing in SVG β€” The, , and Elements – Sara Soueidan, inclusive design engineer

Commentaries

The fall and rise of SVG – how SVG is more relevant than ever - AshleyNolan.co.uk - Blog and Portfolio for Ashley Watson-Nolan

In frontend framework

How to use SVGs ipn React - LogRocket Blog
SVGR - Transform SVG into React components
Transform an SVG into a React Component with SVGR - Bits and Pieces
Embedding SVG code into React - Level Up Coding

svg.js

svg.js is very small (< 20kB)

SVG.js v3.0 | Home
wout/svg.js: A lightweight library for manipulating and animating SVG

Snap.svg

New library written by Dmitry Baranovskiy, author of RaphaΓ«l.

Snap.svg - Home
adobe-webplatform/Snap.svg: The JavaScript library for modern SVG graphics.
Snap.svg Tutorial

An Introdution to Snap.svg
Advanced Snap.svg

A field guide to Snap.svg - Josh Bavari's Ramblings

Snap.svg Example Poster with Snap.svg

D3.js

d3-js

Libraries

Pablo
premasagar/pablo: Pablo is a lightweight, expressive JavaScript SVG library. Pablo creates interactive drawings with SVG (Scalable Vector Graphics), giving access to all of SVG's granularity and power.
Building SVGs in JavaScript with Pablo - LogRocket Blog

Rune.js
runemadsen/rune.js: A JavaScript library for programming graphic design systems with SVG

Optimization

image-optimization#SVG

Animations

A Guide to SVG Animations (SMIL) | CSS-Tricks - CSS-Tricks
Styling And Animating SVGs With CSS β€” Smashing Magazine
Shape Morphing Talk at BrookylnJS by chriscoyier

SVG and GreenSock for Complex Animation - Forward 4 Web Summit - YouTube slide

Non-scaling Stroke

This feature is added in TinySVG and SVG2. Not widely supported by browsers.

SVG resize with non-scaling-stroke value for vector-effect attribute avoiding deformation on path stroke (cross browser) - bl.ocks.org
SVG non-scaling-stroke | Microsoft Connect

Flattening Transforms

javascript - Baking transforms into SVG Path Element commands - Stack Overflow
Flatten.js, general SVG flattener. Flattens transformations of SVG shapes and paths. All shapes and path commands are supported.

Editors

sallar/SVGDraw: Simple SVG Drawing with Backbone, RequireJS & Snap.svg

Method Draw source

Boxy SVG Editor Chrome Extension

Drawing SVG The free online drawing application for designers and developers fully standard compliant SVG

As icon font

in 2023 this is a solved problem, building sprites is a thing of the past
there are many good libraries to be used with frontend framework
see React Icons

Ten reasons we switched from an icon font to SVG - Ian Feather
SVG Icons FTW | Codrops
Icons

Icon System with SVG Sprites | CSS-Tricks
SVG use with External Source | CSS-Tricks
SVG use with External Reference, Take 2 | CSS-Tricks
SVG symbol a Good Choice for Icons | CSS-Tricks <symbol> is better than <g> as it can define viewport
Inline SVG vs Icon Fonts [CAGEMATCH] | CSS-Tricks
Build Your Own SVG Icons
Which SVG technique performs best for way too many icons? – Cloud Four

The SVG Font Machine | Glyphter
edenspiekermann/sprite.sh: A Bash script to build a SVG sprite from a folder of SVG files (typically icons).