Tech is political: The people under attack in Palestine 🇵🇸, Iran 🇮🇷, and Lebanon 🇱🇧 are people like us. They’re our brothers and sisters, too. Read up on their history, scrutinize what you’re told, and demand respect and accountability. Hide

Frontend Dogma

“svg” News Archive

Definition, related topics, tag feed

Definition · Supertopics: images, html, xml, standards · Subtopics: filters (non-exhaustive) · “svg” × ? · “svg” RSS feed (per email)

Entry (Sources) and Additional TopicsDate#
SVG “Linked Parameters” Will Change How We Do Icon Systems (chr/fro)214
images, icons
My Interop 2027 Rankings (val)213
interoperability, web-platform, css, images, javascript, html, apis
Updated Candidate Recommendation: Scalable Vector Graphics (SVG) 2 (w3c)212
standards
CSS Linked Parameters Module Level 1 (tab+/w3c)211
css, images
Which Copyleft Licence Is Suitable for an SVG? (ede)210
images, licensing
Build SVG Charts for Web Applications With Code Examples209
images, visualization, examples
Dark Mode With Web Standards (oll)208
dark-mode, standards, html, javascript, css
Creating Memorable Web Experiences: A Modern CSS Toolkit (hol/css)207
css, animations, user-experience
Do Graphs and Charts Need to Be Accessible? (tem)206
accessibility, png, images, aria, information-design
SVG Filters Guide: Getting Started With the Basics (ana/fro)205
guides, fundamentals, filters, images
SVG Favicons That Respect Theme Preference (paw)204
favicons, images, dark-mode
Put “aria-hidden=true” on Decorative SVGs (mat)203
images, aria, accessibility, attributes
SVGs on the Web: Performance Comparison Based on How You Load Them (nuc)202
images, performance, comparisons
Loading Smarter: SVG vs. Raster Loaders in Modern Web Design (hol/css)201
images, progress-indicators, performance
Measuring SVG Rendering Time (sto)200
png, images, rendering, performance, web-vitals, metrics
SVG Filters Are Just Amazing (ami)199
filters
How to Create an Adaptive SVG Favicon Using the “prefers-color-scheme” Media Query (zor/css)198
videos, how-tos, favicons, css, images
Web Image Formats: JPEG vs. PNG vs. WebP vs. SVG197
images, jpeg, png, webp, comparisons
Smashing Animations: Magnificent SVGs With “<use>” and CSS Custom Properties (mal/sma)196
animations, transforms, css, custom-properties
“pathLength” Makes Makes SVG Path Animations Easier to Manage (ste)195
images, animations
Smashing Animations: Building Adaptive SVGs With “<symbol>”, “<use>”, and CSS Media Queries (mal/sma)194
animations, css, javascript
Inset Shadows Directly on “img” Elements (ana/fro)193
images, css, shadows
Replace Your Animated GIFs With SVGs (fro)192
gif, images, animations, css
Liquid Glass in the Browser: Refraction With CSS and SVG191
effects, liquid-glass, css, images
Implementing Accessible SVG Elements (a11)190
accessibility, images, fundamentals
A Friendly Introduction to SVG (jos)189
introductions, images
I’m More Proud of These 128 Kilobytes Than Anything I’ve Built Since188
performance, case-studies, flash-of-x, minification, optimization
Step Gradients With a Given Number of Steps (ana/fro)187
gradients, css, sass, filters
SVG Optimization and Accessibility Basics (dbu)186
fundamentals, images, optimization, accessibility
Decoding the SVG “path” Element: Curve and Arc Commands (sma)185
javascript, css
Grainy Gradients (ana/fro)184
gradients, effects, css, masking
Decoding the SVG “path” Element: Line Commands (sma)183
Layered Text Headers (chr/fro)182
typography, css, shadows
A Deep Dive Into the Inline Background Overlap Problem (ana/fro)181
deep-dives, css, filters, backgrounds
Super Crispy SVG Icons (ale)180
images, icons, optimization
Using SVGs on Canvas With Compose Multiplatform (eev)179
canvas, images, javascript
Stylish Holidays! Creating a Scroll-Driven Christmas Tree in CSS (uti)178
css, animations, scrolling, effects
Page by Page: How Pagination Makes the Web Accessible (mat)177
accessibility, pagination, html, css
Mastering SVG Arcs (sma)176
images
How to Use CSS and SVG Clipping and Masking Techniques (wpe)175
how-tos, css, images, clipping, masking
SVG Coding Examples: Useful Recipes for Writing Vectors by Hand (sma)174
images, examples
Line Numbers for “<textarea>” Using SVG (sto)173
forms, javascript
Have It All: External, Styleable, and Scalable SVG (sco)172
images, css
“Practical SVG” Is Now Free to Read Online (chr)171
books, images
Minimal SVG Favicon (sto)170
images, favicons, minimalism
Ditch the Pixels: The Small and Vectorized Web (yor)169
html, images
Morphing Arbitrary Paths in SVG168
animations
Accessible SVG Forms167
accessibility, forms, aria
The HTML, CSS, and SVG for a Classic Search Form (chr/fro)166
search, forms, html, css
Dynamic Text Color Contrast Based on Background Lightness With CSS/SVG Filters (miu)165
css, filters, colors, contrast
Everything You Need to Know About Image Formats in 2024 (web)164
images, jpeg, png, gif, webp, avif, pdf
Making Your SVG Icons CSS Masks Instead of Inline HTML or Backgrounds Has Some Benefits (chr/fro)163
images, css, masking, performance
What Is CSS Motion Path?162
css, animations
Responsive SVGs (nil/5t3)161
images, responsive-design
Create Dynamic Web Experiences With Interactive SVG Animations160
images, animations, tooling
An Introduction to Working With SVGs in React159
introductions, images, react
Changing Colors in an SVG Element Using CSS and JavaScript158
colors, css, javascript
Let’s Make a Rubber Button With HTML, CSS, and SVG (tyl/clo)157
buttons, html, css, images
Please Size Your Inline SVGs (aar)156
images
SVG Gradients: Solving Curved Challenges155
images, gradients
Creating SVG Animations Using Tailwind CSS154
images, animations, tailwind
Understanding SVG Paths153
images
That Time When SVG Almost Got Network Support for Raw Sockets152
network, history
Unlocking SVG’s Superpowers (cas/btc)151
videos, images
Building an Animated SVG Logo With animejs150
images, logos, animations, vuejs
Learn Images (wil)149
courses, images, gif, png, jpeg, webp, avif
Easy SVG Customization and Animation: A Practical Guide (cod/sma)148
guides, images, animations
Creating a Custom Cursor Using CSS (css)147
cursors, css, images
6 Common SVG Fails (and How to Fix Them) (css)146
images
Interactive SVG Reference145
images
Invisible Ink Effect With SVG Filters and CSS (che)144
code-pens, css, filters, effects
What I Learned About SVG Accessibility (Among Other Things) From NBC News’ Senate “What If” Project143
accessibility, images, lessons
SVG Sprites: Old-School, Modern, Unknown, and Forgotten (pep)142
images, sprites, performance
How to Scale SVG (ame/css)141
how-tos, scaling, images
Dreamy Blur140
css, effects
8 Tricks for SVG Optimization139
images, tips-and-tricks, optimization
Vector Animations With Figma and SVG Animate138
animations, figma, images
Can SVG Symbols Affect Web Performance?137
images, performance
How to Animate SVG Shapes on Scroll (cod)136
how-tos, css, animations
Magical SVG Techniques (sma)135
images, techniques
Optimizing SVG Patterns to Their Smallest Size (css)134
images, performance
Using “mask” as “clip-path”133
css, masking
Creating Generative SVG Grids (tro)132
javascript, grids
Building UI Components With SVG and CSS (sha)131
components, css
The Many Methods for Using SVG Icons (hui)130
css, images, icons
Wrapping Text Inside an SVG Using CSS (jay)129
css
Fractional SVG Stars With CSS128
css, images
Using SVG With Media Queries (web)127
css, media-queries
Thinking About the Cut-Out Effect: CSS or SVG? (sha)126
css, techniques, effects, comparisons
OMG, SVG Favicons FTW!125
html, images, favicons
Adding Shadows to SVG Icons With CSS and SVG Filters (css)124
css, images, icons, shadows, filters, effects
Accessible SVGs: Perfect Patterns for Screen Reader Users (car/sma)123
accessibility, images, screen-readers
How to Use SVG Image Sprites (cra)122
how-tos, images, sprites
Creating a Custom Cursor Using CSS?121
css, images, cursors
AVIF Has Landed (jaf)120
images, avif, performance, quality, jpeg, webp, png, comparisons
SVG Title vs. HTML Title Attribute (chr/css)119
html, attributes
SVG, Favicons, and All the Fun Things We Can Do With Them (eri/css)118
images, favicons, dark-mode
Tools for Optimizing SVG (chr/css)117
tooling, images, optimization, link-lists
Accessible SVGs: Inclusiveness Beyond Patterns (car/sma)116
images, accessibility, tooling
How We Learned to Draw Text on HTML5 Canvas115
html, canvas, apis, javascript
When to Use SVG vs. When to Use Canvas (chr/css)114
canvas, comparisons
SVG Properties in CSS Guide (kat/css)113
guides, css
A Practical Guide to SVG and Design Tools (sma)112
guides, images, sketch, figma, adobe, tooling, design
SVG Circle Decomposition to Paths (sma)111
images, animations
Icon Fonts vs. SVGs—Which One Should You Use in 2018?110
fonts, icon-fonts, images
What Is SVG Good For? (chr/css)109
images, examples
A Pretty Good SVG Icon System (chr/css)108
icons, images
Masking vs. Clipping: When to Use Each (sar/css)107
masking, clipping, images, comparisons
An Introduction to CSS Filters106
introductions, css, filters
GIF, PNG, JPG, or SVG: Which One to Use?105
images, jpeg, png, gif, webp, comparisons
What Is the Right Image Format for Your Website?104
images, compression, jpeg, gif, png, webp
Align SVG Icons to Text and Say Goodbye to Font Icons (pro)103
images, icons, icon-fonts, fonts, css, design, alignment
Know It All102
websites, css, html, dom, javascript, cssom, nodejs
A Compendium of SVG Information (chr/css)101
overviews, images, link-lists
Presentation Attributes vs. Inline Styles (chr/css)100
html, attributes, css, comparisons
Random Interesting Facts on HTML/SVG Usage (cat/css)99
html, metrics, amp, accessibility
SVG Filter Primitives—Input and Output98
images, filters
SVG and Media Queries (jaf)97
images, css, media-queries, canvas, support, browsers
The SVG “path” Syntax: An Illustrated Guide (chr/css)96
guides, images
WordPress SVG Support: How to Enable SVGs in WordPress95
how-tos, wordpress, images
An Introduction to SVG Filters94
introductions, images, filters
Accessible SVGs in High Contrast Mode (eri/css)93
accessibility, images, contrast, colors
Accessible SVGs (css)92
images, accessibility, examples
Practical SVG (chr/ali)91
images
High Performance SVGs (sar/css)90
images, performance, tooling, optimization
Generating SVG With React (sma)89
react, javascript
A Guide for SVG Support in Email (geo/css)88
guides, images, support, email
SMIL Is Dead! Long Live SMIL! A Guide to Alternatives to SMIL Features (sar/css)87
guides, smil, images, animations
Creating Alpha Channel JPEGs Using SVG (zol)86
images, jpeg, transparency+opacity
Background Image Shapes (css)85
backgrounds, images, shapes, css, transforms, clipping
How to Make Charts With SVG (fon/css)84
how-tos, visualization, images, html, javascript
Creating Cel Animations With SVG (hey/sma)83
animations, images, css, sass
SVG Is for Everybody (chr/btc)82
videos, images
SVG Lessons I Learned the Hard Way (sar/btc)81
videos, images, lessons
The Art of SVG Filters and Why It Is Awesome (sma)80
images, filters, css
SVG Fallbacks Guide (ame/css)79
guides, images, graceful-degradation
Using AngularJS for Data Visualisations (css)78
angularjs, visualization
Progressive Enhancement and Data Visualizations (css)77
progressive-enhancement, html, css, visualization
SVG Animation and CSS Transforms: A Complicated Love Story (css)76
css, animations, transforms
How SVG Fragment Identifiers Work (chr/css)75
images, css
Styling and Animating SVGs With CSS (sar/sma)74
images, css, animations
Probably Don’t Base64 SVG (chr/css)73
images, data-urls, base64
A Guide to SVG Animations (SMIL) (sar/css)72
guides, images, animations, smil
Making SVGs Responsive With CSS (sar/cod)71
images, responsive-design, css
Swapping Out SVG Icons (chr/css)70
images, icons, css, jquery, techniques
Responsive Web Design, CSS Specificity, and SVG Knowledge69
responsive-design, sublime-text, css, javascript
Tips for Creating Accessible SVG (tin)68
accessibility, images, tips-and-tricks
Shadow DOM67
shadow-dom, dom, images, angularjs, css, mathml
Rethinking Responsive SVG (sma)66
responsive-design, images, css
Animating Vectors With SVG (bri/24w)65
images, animations, javascript
SVG Fallbacks (chr/css)64
images, support, browsers, png
SVG Filters on Text (css)63
images, filters, effects
Solving Rendering Performance Puzzles (jaf)62
javascript, performance, rendering
How to Create SVG Paths Easily Using the GIMP (zol)61
how-tos, images
Media Queries Within SVG (tka)60
images, css, media-queries, support, browsers
Media Queries in SVG Images (gri/clo)59
images, css, media-queries
Using SVG (chr/css)58
images, css, support, browsers, examples, data-urls, tooling, link-lists
CSS Masks—How to Use Masking in CSS Now (sch)57
how-tos, css, masking, images
Better SVG Sprites With Fragment Identifiers (sto)56
images, sprites
Resolution Independence With SVG (dbu/sma)55
images, css, responsive-design
A Farewell to CSS3 Gradients (mis)54
css, gradients, vendor-extensions, images
Google Now Indexes SVG (jsa)53
google, search, images
Firefox 4: The HTML5 Parser—Inline SVG, Speed, and More (hsi/moz)52
html, parsing, gecko, firefox, browsers
SVG Wow51
websites, images, examples
Microsoft Joins SVG Working Group (tho/osn)50
microsoft, standards, w3c
W3C Cheatsheet (don/w3c)49
cheat-sheets, documentation, css, html, xpath, accessibility, internationalization, typography
“toDataURL,” Canvas, and SVG (bra/aja)48
javascript, apis, canvas, images
Google to Microsoft: Support SVG (inf)47
google, microsoft, browsers, internet-explorer, standards, support
Why IE9 Will Support SVG (fyr)46
internet-explorer, browsers, images, support
SVG Is the Future of Application Development45
images, web-apps, outlooks
SVG Test Page (fyr)44
images, testing
SVG Filter Performance Improvements in Gecko 1.9.143
gecko, browser-engines, browsers, images, filters
SVG Paint Servers for HTML42
html, css, images, backgrounds
State of AJAX for June 2008: Apple Flexes Open Web Muscles (dal/aja)41
browsers, standards, performance, javascript, extjs, dojo, yui, mootools, jquery, css, canvas, tooling, link-lists, ajaxian
Rendering Performance in Canvas Compared to SVG and VML (dal/aja)40
performance, rendering, canvas, images, comparisons
SVG on Acid? (ada/w3c)39
acid-tests, standards
Web Standards, the Real Flash Killer (fyr)38
standards, html, canvas, multimedia, flash
SVG and “text/html” (ann)37
images, mime-types, html, parsing
Color Sampling and SVG Gradients (bur)36
colors, images, gradients
SVG Video Demo35
multimedia, silverlight
Tim Berners-Lee and Reinventing HTML34
html, standards, w3c, whatwg
Wherefore Art Thou, SVG?33
w3c, standards
More W3C Controversy (dba)32
w3c, standards, interoperability
Vector Graphics in CSS (ann)31
css, images, xhtml
W3C May Push Wireless Web Specs (cne)30
w3c, mobile, xhtml, smil, standards
SVG and Typography29
typography
SVG Developers, Start Your Engines28
w3c
Graphics Standard Fit to Print27
print, standards
An SVG Case Study: Integrated, Dynamic Avalanche Forecasting26
perl, html, sql, databases, images, case-studies
Graphics Standard Heads to Print (cne)25
w3c, standards, images, print
SVG’s Past and Promising Future24
standards, outlooks
Content Negotiation in Heterogenous XML Environments23
content-negotiation, mime-types, xml, xhtml, rdf, mathml
Recommended Doctype Declarations to Use in Your Web Document (kar/w3c)22
html, xhtml, mathml, doctypes
SVG: Modularized and Mobile21
images, html, animations
SWF vs. SVG—Which Should You Choose?20
flash, images, comparisons
A Milestone for SVG19
images, w3c
A New Face for the Web (zdn)18
images, flash
SVG Validator17
tools, analysis, conformance
SVG and CSS Gradient Generator16
tools, exploration, code-generation, css, gradients
Code Converter15
tools, exploration, conversion, html, css, json, json-ld, javascript, typescript, graphql
Raster Image to SVG Converter (tom)14
tools, exploration, conversion, images
Icon Font, SVG, PDF, and PNG Generator13
tools, exploration, images, code-generation, fonts, icon-fonts, pdf, png
Image Compressor (Compressor.io)12
tools, exploration, images, compression, performance, jpeg, png, gif, webp
SVG Editor11
tools, exploration, images
SVG Optimizer (Daryll Doyle)10
tools, exploration, images, optimization
SVG Optimizer (Jake Archibald) (jaf)9
tools, exploration, images, optimization
SVG Shape Generator8
tools, exploration, images
SVG URL Encoder7
tools, exploration, images, urls, code-generation
Wave-Style SVG Generator6
tools, exploration, images, effects, code-generation
JPEG to SVG Converter (ado)5
tools, exploration, conversion, images, jpeg
SVG to Data URI Converter4
tools, exploration, conversion, data-urls
Confetti Generator3
tools, exploration, images, png, jpeg, code-generation, css
Image Converter (Canva)2
tools, exploration, conversion, images, jpeg, png, pdf
Background Pattern Generator (Neatbo)1
tools, exploration, images, backgrounds, code-generation, css