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, and tag feed

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

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