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)205
css, images
Which Copyleft Licence Is Suitable for an SVG? (ede)204
images, licensing
Build SVG Charts for Web Applications With Code Examples203
images, visualization, examples
Dark Mode With Web Standards (oll)202
dark-mode, standards, html, javascript, css
Creating Memorable Web Experiences: A Modern CSS Toolkit (hol/css)201
css, animations, user-experience
Do Graphs and Charts Need to Be Accessible? (tem)200
accessibility, png, images, aria, information-design
SVG Filters Guide: Getting Started With the Basics (ana/fro)199
guides, fundamentals, filters, images
SVG Favicons That Respect Theme Preference (paw)198
favicons, images, dark-mode
Put “aria-hidden=true” on Decorative SVGs (mat)197
images, aria, accessibility, attributes
SVGs on the Web: Performance Comparison Based on How You Load Them (nuc)196
images, performance, comparisons
Loading Smarter: SVG vs. Raster Loaders in Modern Web Design (hol/css)195
images, progress-indicators, performance
Measuring SVG Rendering Time (sto)194
png, images, rendering, performance, web-vitals, metrics
SVG Filters Are Just Amazing (ami)193
filters
How to Create an Adaptive SVG Favicon Using the “prefers-color-scheme” Media Query (zor/css)192
videos, how-tos, favicons, css, images
Smashing Animations: Magnificent SVGs With “<use>” and CSS Custom Properties (mal/sma)191
animations, transforms, css, custom-properties
“pathLength” Makes Makes SVG Path Animations Easier to Manage (ste)190
images, animations
Smashing Animations: Building Adaptive SVGs With “<symbol>”, “<use>”, and CSS Media Queries (mal/sma)189
animations, css, javascript
Inset Shadows Directly on “img” Elements (ana/fro)188
images, css, shadows
Replace Your Animated GIFs With SVGs (fro)187
gif, images, animations, css
Liquid Glass in the Browser: Refraction With CSS and SVG186
effects, liquid-glass, css, images
Implementing Accessible SVG Elements (a11)185
accessibility, images, fundamentals
A Friendly Introduction to SVG (jos)184
introductions, images
I’m More Proud of These 128 Kilobytes Than Anything I’ve Built Since183
performance, case-studies, flash-of-x, minification, optimization
Step Gradients With a Given Number of Steps (ana/fro)182
gradients, css, sass, filters
SVG Optimization and Accessibility Basics (dbu)181
fundamentals, images, optimization, accessibility
Decoding the SVG “path” Element: Curve and Arc Commands (sma)180
javascript, css
Grainy Gradients (ana/fro)179
gradients, effects, css, masking
Decoding the SVG “path” Element: Line Commands (sma)178
Layered Text Headers (chr/fro)177
typography, css, shadows
A Deep Dive Into the Inline Background Overlap Problem (ana/fro)176
deep-dives, css, filters, backgrounds
Super Crispy SVG Icons (ale)175
images, icons, optimization
Using SVGs on Canvas With Compose Multiplatform (eev)174
canvas, images, javascript
Stylish Holidays! Creating a Scroll-Driven Christmas Tree in CSS (uti)173
css, animations, scrolling, effects
Page by Page: How Pagination Makes the Web Accessible (mat)172
accessibility, pagination, html, css
Mastering SVG Arcs (sma)171
images
How to Use CSS and SVG Clipping and Masking Techniques (wpe)170
how-tos, css, images, clipping, masking
SVG Coding Examples: Useful Recipes for Writing Vectors by Hand (sma)169
images, examples
Line Numbers for “<textarea>” Using SVG (sto)168
forms, javascript
Have It All: External, Styleable, and Scalable SVG (sco)167
images, css
“Practical SVG” Is Now Free to Read Online (chr)166
books, images
Minimal SVG Favicon (sto)165
images, favicons, minimalism
Ditch the Pixels: The Small and Vectorized Web (yor)164
html, images
Accessible SVG Forms163
accessibility, forms, aria
Morphing Arbitrary Paths in SVG162
animations
The HTML, CSS, and SVG for a Classic Search Form (chr/fro)161
search, forms, html, css
Dynamic Text Color Contrast Based on Background Lightness With CSS/SVG Filters (miu)160
css, filters, colors, contrast
Everything You Need to Know About Image Formats in 2024 (web)159
images, jpeg, png, gif, webp, avif, pdf
Making Your SVG Icons CSS Masks Instead of Inline HTML or Backgrounds Has Some Benefits (chr/fro)158
images, css, masking, performance
What Is CSS Motion Path?157
css, animations
Responsive SVGs (nil/5t3)156
images, responsive-design
Create Dynamic Web Experiences With Interactive SVG Animations155
images, animations, tooling
An Introduction to Working With SVGs in React154
introductions, images, react
Changing Colors in an SVG Element Using CSS and JavaScript153
colors, css, javascript
Let’s Make a Rubber Button With HTML, CSS, and SVG (tyl/clo)152
buttons, html, css, images
Please Size Your Inline SVGs (aar)151
images
SVG Gradients: Solving Curved Challenges150
images, gradients
Creating SVG Animations Using Tailwind CSS149
images, animations, tailwind
Understanding SVG Paths148
images
That Time When SVG Almost Got Network Support for Raw Sockets147
network, history
Unlocking SVG’s Superpowers (btc)146
videos, images
Building an Animated SVG Logo With animejs145
images, logos, animations, vuejs
Learn Images (wil)144
courses, images, gif, png, jpeg, webp, avif
Easy SVG Customization and Animation: A Practical Guide (cod/sma)143
guides, images, animations
Creating a Custom Cursor Using CSS (css)142
cursors, css, images
6 Common SVG Fails (and How to Fix Them) (css)141
images
Interactive SVG Reference140
images
Invisible Ink Effect With SVG Filters and CSS (che)139
code-pens, css, filters, effects
What I Learned About SVG Accessibility (Among Other Things) From NBC News’ Senate “What If” Project138
accessibility, images, lessons
SVG Sprites: Old-School, Modern, Unknown, and Forgotten (pep)137
images, sprites, performance
How to Scale SVG (ame/css)136
how-tos, scaling, images
Dreamy Blur135
css, effects
8 Tricks for SVG Optimization134
images, tips-and-tricks, optimization
Vector Animations With Figma and SVG Animate133
animations, figma, images
Can SVG Symbols Affect Web Performance?132
images, performance
How to Animate SVG Shapes on Scroll (cod)131
how-tos, css, animations
Magical SVG Techniques (sma)130
images, techniques
Optimizing SVG Patterns to Their Smallest Size (css)129
images, performance
Using “mask” as “clip-path”128
css, masking
Creating Generative SVG Grids (tro)127
javascript, grids
Building UI Components With SVG and CSS (sha)126
components, css
The Many Methods for Using SVG Icons (hui)125
css, images, icons
Wrapping Text Inside an SVG Using CSS124
css
Fractional SVG Stars With CSS123
css, images
Using SVG With Media Queries (web)122
css, media-queries
Thinking About the Cut-Out Effect: CSS or SVG? (sha)121
css, techniques, effects, comparisons
OMG, SVG Favicons FTW!120
html, images, favicons
Adding Shadows to SVG Icons With CSS and SVG Filters (css)119
css, images, icons, shadows, filters, effects
Accessible SVGs: Perfect Patterns for Screen Reader Users (car/sma)118
accessibility, images, screen-readers
How to Use SVG Image Sprites (cra)117
how-tos, images, sprites
Creating a Custom Cursor Using CSS?116
css, images, cursors
AVIF Has Landed (jaf)115
images, avif, performance, quality, jpeg, webp, png, comparisons
SVG Title vs. HTML Title Attribute (chr/css)114
html, attributes
SVG, Favicons, and All the Fun Things We Can Do With Them (eri/css)113
images, favicons, dark-mode
Tools for Optimizing SVG (chr/css)112
tooling, images, optimization, link-lists
Accessible SVGs: Inclusiveness Beyond Patterns (car/sma)111
images, accessibility, tooling
How We Learned to Draw Text on HTML5 Canvas110
html, canvas, apis, javascript
When to Use SVG vs. When to Use Canvas (chr/css)109
canvas, comparisons
SVG Properties in CSS Guide (kat/css)108
guides, css
A Practical Guide to SVG and Design Tools (sma)107
guides, images, sketch, figma, adobe, tooling, design
SVG Circle Decomposition to Paths (sma)106
images, animations
Icon Fonts vs. SVGs—Which One Should You Use in 2018?105
fonts, icon-fonts, images
What Is SVG Good For? (chr/css)104
images, examples
A Pretty Good SVG Icon System (chr/css)103
icons, images
Masking vs. Clipping: When to Use Each (sar/css)102
masking, clipping, images, comparisons
An Introduction to CSS Filters101
introductions, css, filters
GIF, PNG, JPG, or SVG: Which One to Use?100
images, jpeg, png, gif, webp, comparisons
What Is the Right Image Format for Your Website?99
images, compression, jpeg, gif, png, webp
Align SVG Icons to Text and Say Goodbye to Font Icons (pro)98
images, icons, icon-fonts, fonts, css, design, alignment
Know It All97
websites, css, html, dom, javascript, cssom, nodejs
A Compendium of SVG Information (chr/css)96
overviews, images, link-lists
Presentation Attributes vs. Inline Styles (chr/css)95
html, attributes, css, comparisons
Random Interesting Facts on HTML/SVG Usage (cat/css)94
html, metrics, amp, accessibility
SVG Filter Primitives—Input and Output93
images, filters
SVG and Media Queries (jaf)92
images, css, media-queries, canvas, support, browsers
The SVG “path” Syntax: An Illustrated Guide (chr/css)91
guides, images
WordPress SVG Support: How to Enable SVGs in WordPress90
how-tos, wordpress, images
An Introduction to SVG Filters89
introductions, images, filters
Accessible SVGs in High Contrast Mode (eri/css)88
accessibility, images, contrast, colors
Accessible SVGs (css)87
images, accessibility, examples
Practical SVG (chr/ali)86
images
High Performance SVGs (sar/css)85
images, performance, tooling, optimization
Generating SVG With React (sma)84
react, javascript
A Guide for SVG Support in Email (geo/css)83
guides, images, support, email
SMIL Is Dead! Long Live SMIL! A Guide to Alternatives to SMIL Features (sar/css)82
guides, smil, images, animations
Creating Alpha Channel JPEGs Using SVG (zol)81
images, jpeg, transparency+opacity
Background Image Shapes (css)80
backgrounds, images, shapes, css, transforms, clipping
How to Make Charts With SVG (fon/css)79
how-tos, visualization, images, html, javascript
Creating Cel Animations With SVG (hey/sma)78
animations, images, css, sass
SVG Is for Everybody (chr/btc)77
videos, images
SVG Lessons I Learned the Hard Way (sar/btc)76
videos, images, lessons
The Art of SVG Filters and Why It Is Awesome (sma)75
images, filters, css
SVG Fallbacks Guide (ame/css)74
guides, images, graceful-degradation
Using AngularJS for Data Visualisations (css)73
angularjs, visualization
Progressive Enhancement and Data Visualizations (css)72
progressive-enhancement, html, css, visualization
SVG Animation and CSS Transforms: A Complicated Love Story (css)71
css, animations, transforms
How SVG Fragment Identifiers Work (chr/css)70
images, css
Styling and Animating SVGs With CSS (sar/sma)69
images, css, animations
Probably Don’t Base64 SVG (chr/css)68
images, data-urls, base64
A Guide to SVG Animations (SMIL) (sar/css)67
guides, images, animations, smil
Making SVGs Responsive With CSS (sar/cod)66
images, responsive-design, css
Swapping Out SVG Icons (chr/css)65
images, icons, css, jquery, techniques
Responsive Web Design, CSS Specificity, and SVG Knowledge64
responsive-design, sublime-text, css, javascript
Tips for Creating Accessible SVG (tin)63
accessibility, images, tips-and-tricks
Shadow DOM62
shadow-dom, dom, images, angularjs, css, mathml
Rethinking Responsive SVG (sma)61
responsive-design, images, css
Animating Vectors With SVG (bri/24w)60
images, animations, javascript
SVG Fallbacks (chr/css)59
images, support, browsers, png
SVG Filters on Text (css)58
images, filters, effects
Solving Rendering Performance Puzzles (jaf)57
javascript, performance, rendering
How to Create SVG Paths Easily Using the GIMP (zol)56
how-tos, images
Media Queries Within SVG (tka)55
images, css, media-queries, support, browsers
Media Queries in SVG Images (gri/clo)54
images, css, media-queries
Using SVG (chr/css)53
images, css, support, browsers, examples, data-urls, tooling, link-lists
CSS Masks—How to Use Masking in CSS Now (sch)52
how-tos, css, masking, images
Better SVG Sprites With Fragment Identifiers (sto)51
images, sprites
Resolution Independence With SVG (dbu/sma)50
images, css, responsive-design
A Farewell to CSS3 Gradients (mis)49
css, gradients, vendor-extensions, images
Google Now Indexes SVG (jsa)48
google, search, images
Firefox 4: The HTML5 Parser—Inline SVG, Speed, and More (hsi/moz)47
html, parsing, gecko, firefox, browsers
SVG Wow46
websites, images, examples
Microsoft Joins SVG Working Group (tho/osn)45
microsoft, standards, w3c
W3C Cheatsheet (don/w3c)44
cheat-sheets, documentation, css, html, xpath, accessibility, internationalization, typography
“toDataURL,” Canvas, and SVG (bra/aja)43
javascript, apis, canvas, images
Google to Microsoft: Support SVG (inf)42
google, microsoft, browsers, internet-explorer, standards, support
Why IE9 Will Support SVG (fyr)41
internet-explorer, browsers, images, support
SVG Is the Future of Application Development40
images, web-apps, outlooks
SVG Test Page (fyr)39
images, testing
SVG Filter Performance Improvements in Gecko 1.9.138
gecko, browser-engines, browsers, images, filters
SVG Paint Servers for HTML37
html, css, images, backgrounds
State of AJAX for June 2008: Apple Flexes Open Web Muscles (dal/aja)36
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)35
performance, rendering, canvas, images, comparisons
Web Standards, the Real Flash Killer (fyr)34
standards, html, canvas, multimedia, flash
SVG and “text/html” (ann)33
images, mime-types, html, parsing
Color Sampling and SVG Gradients (bur)32
colors, images, gradients
SVG Video Demo31
multimedia, silverlight
Tim Berners-Lee and Reinventing HTML30
html, standards, w3c, whatwg
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