| Layered Text Headers (chr/fro) | | 158 |
| typography, css, shadows |
| A Deep Dive Into the Inline Background Overlap Problem (ana/fro) | | 157 |
| deep-dives, css, filters, backgrounds |
| Super Crispy SVG Icons (ale) | | 156 |
| images, icons, optimization |
| Using SVGs on Canvas With Compose Multiplatform (eev) | | 155 |
| canvas, images, javascript |
| Stylish Holidays! Creating a Scroll-Driven Christmas Tree in CSS (uti) | | 154 |
| css, animations, scrolling, effects |
| Page by Page: How Pagination Makes the Web Accessible (mat) | | 153 |
| accessibility, pagination, html, css |
| Mastering SVG Arcs (sma) | | 152 |
| images |
| How to Use CSS and SVG Clipping and Masking Techniques (wpe) | | 151 |
| how-tos, css, images, clipping, masking |
| SVG Coding Examples: Useful Recipes for Writing Vectors by Hand (sma) | | 150 |
| images, examples |
| Line Numbers for “<textarea>” Using SVG (sto) | | 149 |
| forms, javascript |
| Have It All: External, Styleable, and Scalable SVG (sco) | | 148 |
| images, css |
| “Practical SVG” Is Now Free to Read Online (chr) | | 147 |
| books, images |
| Minimal SVG Favicon (sto) | | 146 |
| images, favicons, minimalism |
| Ditch the Pixels: The Small and Vectorized Web (yor) | | 145 |
| html, images |
| Accessible SVG Forms | | 144 |
| accessibility, forms, aria |
| Morphing Arbitrary Paths in SVG | | 143 |
| animations |
| The HTML, CSS, and SVG for a Classic Search Form (chr/fro) | | 142 |
| search, forms, html, css |
| Dynamic Text Color Contrast Based on Background Lightness With CSS/SVG Filters (miu) | | 141 |
| css, filters, colors, contrast |
| Everything You Need to Know About Image Formats in 2024 (web) | | 140 |
| images, jpeg, png, gif, webp, avif, pdf |
| Making Your SVG Icons CSS Masks Instead of Inline HTML or Backgrounds Has Some Benefits (chr/fro) | | 139 |
| images, css, masking, performance |
| What Is CSS Motion Path? | | 138 |
| css, animations |
| Responsive SVGs (nil/5t3) | | 137 |
| images, responsive-design |
| Create Dynamic Web Experiences With Interactive SVG Animations | | 136 |
| images, animations, tooling |
| An Introduction to Working With SVGs in React | | 135 |
| introductions, images, react |
| Changing Colors in an SVG Element Using CSS and JavaScript | | 134 |
| colors, css, javascript |
| Let’s Make a Rubber Button With HTML, CSS, and SVG (tyl/clo) | | 133 |
| buttons, html, css, images |
| Please Size Your Inline SVGs (aar) | | 132 |
| images |
| SVG Gradients: Solving Curved Challenges | | 131 |
| images, gradients |
| Creating SVG Animations Using Tailwind CSS | | 130 |
| images, animations, tailwind |
| Understanding SVG Paths | | 129 |
| images |
| That Time When SVG Almost Got Network Support for Raw Sockets | | 128 |
| network, history |
| Unlocking SVG’s Superpowers (btc) | | 127 |
| videos, images |
| Building an Animated SVG Logo With animejs | | 126 |
| images, logos, animations, vuejs |
| Learn Images (wil/dev) | | 125 |
| courses, images, gif, png, jpeg, webp, avif |
| Easy SVG Customization and Animation: A Practical Guide (cod/sma) | | 124 |
| guides, images, animations |
| Creating a Custom Cursor Using CSS (css) | | 123 |
| cursors, css, images |
| 6 Common SVG Fails (and How to Fix Them) (css) | | 122 |
| images |
| Interactive SVG Reference | | 121 |
| images |
| Invisible Ink Effect With SVG Filters and CSS (che) | | 120 |
| code-pens, css, filters, effects |
| What I Learned About SVG Accessibility (Among Other Things) From NBC News’ Senate “What If” Project | | 119 |
| accessibility, images, lessons |
| SVG Sprites: Old-School, Modern, Unknown, and Forgotten (pep) | | 118 |
| images, sprites, performance |
| How to Scale SVG (ame/css) | | 117 |
| how-tos, scaling, images |
| Dreamy Blur | | 116 |
| css, effects |
| 8 Tricks for SVG Optimization (uxd) | | 115 |
| images, tips-and-tricks, optimization |
| Vector Animations With Figma and SVG Animate (uxd) | | 114 |
| animations, figma, images |
| Can SVG Symbols Affect Web Performance? | | 113 |
| images, performance |
| How to Animate SVG Shapes on Scroll (cod) | | 112 |
| how-tos, css, animations |
| Magical SVG Techniques (sma) | | 111 |
| images, techniques |
| Optimizing SVG Patterns to Their Smallest Size (css) | | 110 |
| images, performance |
| Using “mask” as “clip-path” | | 109 |
| css, masking |
| Creating Generative SVG Grids | | 108 |
| javascript, grids |
| Building UI Components With SVG and CSS (sha) | | 107 |
| components, css |
| The Many Methods for Using SVG Icons (hui) | | 106 |
| css, images, icons |
| Wrapping Text Inside an SVG Using CSS | | 105 |
| css |
| Fractional SVG Stars With CSS | | 104 |
| css, images |
| Using SVG With Media Queries | | 103 |
| css, media-queries |
| Thinking About the Cut-Out Effect: CSS or SVG? (sha) | | 102 |
| css, techniques, effects, comparisons |
| OMG, SVG Favicons FTW! | | 101 |
| html, images, favicons |
| Adding Shadows to SVG Icons With CSS and SVG Filters (css) | | 100 |
| css, images, icons, shadows, filters, effects |
| How to Use SVG Image Sprites (cra) | | 99 |
| how-tos, images, sprites |
| Creating a Custom Cursor Using CSS? | | 98 |
| css, images, cursors |
| AVIF Has Landed (jaf) | | 97 |
| images, avif, performance, quality, jpeg, webp, png, comparisons |
| SVG, Favicons, and All the Fun Things We Can Do With Them (eri/css) | | 96 |
| images, favicons, dark-mode |
| Tools for Optimizing SVG (chr/css) | | 95 |
| tooling, images, optimization, link-lists |
| Accessible SVGs: Inclusiveness Beyond Patterns (car/sma) | | 94 |
| images, accessibility, tooling |
| How We Learned to Draw Text on HTML5 Canvas | | 93 |
| html, canvas, apis, javascript |
| When to Use SVG vs. When to Use Canvas (chr/css) | | 92 |
| canvas, comparisons |
| SVG Properties in CSS Guide (kat/css) | | 91 |
| guides, css |
| A Practical Guide to SVG and Design Tools (sma) | | 90 |
| guides, images, sketch, figma, adobe, tooling, design |
| SVG Circle Decomposition to Paths (sma) | | 89 |
| images, animations |
| Icon Fonts vs. SVGs—Which One Should You Use in 2018? | | 88 |
| fonts, icon-fonts, images |
| What Is SVG Good For? (chr/css) | | 87 |
| images, examples |
| A Pretty Good SVG Icon System (chr/css) | | 86 |
| icons, images |
| Masking vs. Clipping: When to Use Each (sar/css) | | 85 |
| masking, clipping, images, comparisons |
| GIF, PNG, JPG, or SVG: Which One to Use? | | 84 |
| images, jpeg, png, gif, webp, comparisons |
| What Is the Right Image Format for Your Website? | | 83 |
| images, compression, jpeg, gif, png, webp |
| Align SVG Icons to Text and Say Goodbye to Font Icons | | 82 |
| images, icons, icon-fonts, fonts, css, design, alignment |
| Know It All | | 81 |
| websites, css, html, dom, javascript, cssom, nodejs |
| A Compendium of SVG Information (chr/css) | | 80 |
| overviews, images, link-lists |
| Presentation Attributes vs. Inline Styles (chr/css) | | 79 |
| html, attributes, css, comparisons |
| Random Interesting Facts on HTML/SVG Usage (cat/css) | | 78 |
| html, metrics, amp, accessibility |
| SVG and Media Queries (jaf) | | 77 |
| images, css, media-queries, canvas, support, browsers |
| The SVG “path” Syntax: An Illustrated Guide (chr/css) | | 76 |
| guides, images |
| WordPress SVG Support: How to Enable SVGs in WordPress | | 75 |
| how-tos, wordpress, images |
| Accessible SVGs in High Contrast Mode (eri/css) | | 74 |
| accessibility, images, contrast, colors |
| Accessible SVGs (css) | | 73 |
| images, accessibility, examples |
| Practical SVG (chr/ali) | | 72 |
| images |
| High Performance SVGs (sar/css) | | 71 |
| images, performance, tooling, optimization |
| Generating SVG With React (sma) | | 70 |
| react, javascript |
| A Guide for SVG Support in Email (geo/css) | | 69 |
| guides, images, support, email |
| SMIL Is Dead! Long Live SMIL! A Guide to Alternatives to SMIL Features (sar/css) | | 68 |
| guides, smil, images, animations |
| Background Image Shapes (css) | | 67 |
| backgrounds, images, shapes, css, transforms, clipping |
| How to Make Charts With SVG (fon/css) | | 66 |
| how-tos, visualization, images, html, javascript |
| Creating Cel Animations With SVG (hey/sma) | | 65 |
| animations, images, css, sass |
| SVG Lessons I Learned the Hard Way (sar/btc) | | 64 |
| videos, images, lessons |
| SVG Is for Everybody (chr/btc) | | 63 |
| videos, images |
| The Art of SVG Filters and Why It Is Awesome (sma) | | 62 |
| images, filters, css |
| SVG Fallbacks Guide (ame/css) | | 61 |
| guides, images, graceful-degradation |
| Using AngularJS for Data Visualisations (css) | | 60 |
| angularjs, visualization |
| Progressive Enhancement and Data Visualizations (css) | | 59 |
| progressive-enhancement, html, css, visualization |
| SVG Animation and CSS Transforms: A Complicated Love Story (css) | | 58 |
| css, animations, transforms |
| How SVG Fragment Identifiers Work (chr/css) | | 57 |
| images, css |
| Styling and Animating SVGs With CSS (sar/sma) | | 56 |
| images, css, animations |
| Probably Don’t Base64 SVG (chr/css) | | 55 |
| images, data-urls |
| A Guide to SVG Animations (SMIL) (sar/css) | | 54 |
| guides, images, animations, smil |
| Making SVGs Responsive With CSS (sar/cod) | | 53 |
| images, responsive-design, css |
| Swapping Out SVG Icons (chr/css) | | 52 |
| images, icons, css, jquery, techniques |
| Responsive Web Design, CSS Specificity, and SVG Knowledge | | 51 |
| responsive-design, sublime-text, css, javascript |
| Tips for Creating Accessible SVG (tin) | | 50 |
| accessibility, images, tips-and-tricks |
| Shadow DOM | | 49 |
| shadow-dom, dom, images, angularjs, css, mathml |
| Rethinking Responsive SVG (sma) | | 48 |
| responsive-design, images, css |
| Animating Vectors With SVG (bri/24w) | | 47 |
| images, animations, javascript |
| SVG Fallbacks (chr/css) | | 46 |
| images, support, browsers, png |
| SVG Filters on Text (css) | | 45 |
| images, filters, effects |
| Solving Rendering Performance Puzzles (jaf) | | 44 |
| javascript, performance, rendering |
| Media Queries Within SVG (tka) | | 43 |
| images, css, media-queries, support, browsers |
| Media Queries in SVG Images (gri/clo) | | 42 |
| images, css, media-queries |
| Using SVG (chr/css) | | 41 |
| images, css, support, browsers, examples, data-urls, tooling, link-lists |
| CSS Masks—How to Use Masking in CSS Now (sch) | | 40 |
| how-tos, css, masking, images |
| Better SVG Sprites With Fragment Identifiers (sto) | | 39 |
| images, sprites |
| Resolution Independence With SVG (dbu/sma) | | 38 |
| images, css, responsive-design |
| A Farewell to CSS3 Gradients (mis) | | 37 |
| css, gradients, vendor-extensions, images |
| Microsoft Joins SVG Working Group (tho/osn) | | 36 |
| microsoft, standards, w3c |
| W3C Cheatsheet (don/w3c) | | 35 |
| cheat-sheets, documentation, css, html, accessibility, internationalization, typography |
| Google to Microsoft: Support SVG (inf) | | 34 |
| google, microsoft, browsers, internet-explorer, standards, support |
| Why IE9 Will Support SVG (fyr) | | 33 |
| internet-explorer, microsoft, browsers, images, support |
| SVG Is the Future of Application Development | | 32 |
| images, web-apps, outlooks |
| SVG Test Page (fyr) | | 31 |
| images, testing |
| SVG Filter Performance Improvements in Gecko 1.9.1 | | 30 |
| gecko, browser-engines, browsers, images, filters |
| SVG Paint Servers for HTML | | 29 |
| html, css, images, backgrounds |
| Web Standards, the Real Flash Killer (fyr) | | 28 |
| standards, html, canvas, multimedia, flash |
| Color Sampling and SVG Gradients (bur) | | 27 |
| colors, images, gradients |
| W3C May Push Wireless Web Specs (cne) | | 26 |
| w3c, mobile, xhtml, smil, standards |
| SVG Developers, Start Your Engines | | 25 |
| w3c |
| Graphics Standard Fit to Print | | 24 |
| print, standards |
| An SVG Case Study: Integrated, Dynamic Avalanche Forecasting | | 23 |
| perl, html, sql, databases, images, case-studies |
| Graphics Standard Heads to Print (cne) | | 22 |
| w3c, standards, images, print |
| SVG’s Past and Promising Future | | 21 |
| standards, outlooks |
| Content Negotiation in Heterogenous XML Environments | | 20 |
| content-negotiation, mime-types, xml, xhtml, rdf, mathml |
| Recommended Doctype Declarations to Use in Your Web Document (kar/w3c) | | 19 |
| html, xhtml, mathml |
| SVG: Modularized and Mobile | | 18 |
| images, html, animations |
| SWF vs. SVG—Which Should You Choose? | | 17 |
| flash, images, comparisons |
| A Milestone for SVG | | 16 |
| images, w3c |
| A New Face for the Web (zdn) | | 15 |
| images, flash |
| Confetti Generator | | 14 |
| tools, exploration, images, png, jpeg, code-generation, css |
| SVG to Data URI Converter | | 13 |
| tools, exploration, conversion, data-urls |
| JPEG to SVG Converter | | 12 |
| tools, exploration, conversion, images, jpeg |
| Wave-Style SVG Generator | | 11 |
| tools, exploration, images, effects, code-generation |
| SVG URL Encoder | | 10 |
| tools, exploration, images, urls, code-generation |
| SVG Shape Generator | | 9 |
| tools, exploration, images |
| SVG Optimizer (Jake Archibald) (jaf) | | 8 |
| tools, exploration, images, optimization |
| SVG Optimizer (Daryll Doyle) | | 7 |
| tools, exploration, images, optimization |
| SVG Editor | | 6 |
| tools, exploration, images |
| Icon Font, SVG, PDF, and PNG Generator | | 5 |
| tools, exploration, images, code-generation, fonts, icon-fonts, pdf, png |
| Raster Image to SVG Converter (tom/dev) | | 4 |
| tools, exploration, conversion, images |
| Code Converter | | 3 |
| tools, exploration, conversion, html, css, json, json-ld, javascript, typescript, graphql |
| SVG and CSS Gradient Generator | | 2 |
| tools, exploration, code-generation, css, gradients |
| SVG Validator | | 1 |
| tools, analysis, conformance |
