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