| A Deep Dive Into the Inline Background Overlap Problem (ana/fro) | | 133 |
| deep-dives, css, filters, backgrounds |
| Super Crispy SVG Icons (ale) | | 132 |
| images, icons, optimization |
| Using SVGs on Canvas With Compose Multiplatform (eev) | | 131 |
| canvas, images, javascript |
| Stylish Holidays! Creating a Scroll-Driven Christmas Tree in CSS (uti) | | 130 |
| css, animations, scrolling, effects |
| Page by Page: How Pagination Makes the Web Accessible (mat) | | 129 |
| accessibility, pagination, html, css |
| Mastering SVG Arcs (sma) | | 128 |
| images |
| How to Use CSS and SVG Clipping and Masking Techniques (wpe) | | 127 |
| how-tos, css, images, masking |
| SVG Coding Examples: Useful Recipes for Writing Vectors by Hand (sma) | | 126 |
| images, examples |
| Line Numbers for “<textarea>” Using SVG (mad) | | 125 |
| forms, javascript |
| Have It All: External, Styleable, and Scalable SVG (sco) | | 124 |
| images, css |
| “Practical SVG” Is Now Free to Read Online (chr) | | 123 |
| books, images |
| Minimal SVG Favicon (sto) | | 122 |
| images, favicons, minimalism |
| Ditch the Pixels: The Small and Vectorized Web (yor) | | 121 |
| html, images |
| Morphing Arbitrary Paths in SVG (vg) | | 120 |
| animations |
| Accessible SVG Forms (jak) | | 119 |
| accessibility, forms, aria |
| The HTML, CSS, and SVG for a Classic Search Form (chr/fro) | | 118 |
| search, forms, html, css |
| Dynamic Text Color Contrast Based on Background Lightness With CSS/SVG Filters (miu) | | 117 |
| css, filters, colors, contrast |
| Everything You Need to Know About Image Formats in 2024 (web) | | 116 |
| images, jpeg, png, gif, webp, avif, pdf |
| Making Your SVG Icons CSS Masks Instead of Inline HTML or Backgrounds Has Some Benefits (chr/fro) | | 115 |
| images, css, masking, performance |
| What Is CSS Motion Path? (let) | | 114 |
| css, animations |
| Responsive SVGs (nil/5t3) | | 113 |
| images, responsive-design |
| Create Dynamic Web Experiences With Interactive SVG Animations (sit) | | 112 |
| images, animations, tooling |
| An Introduction to Working With SVGs in React (sit) | | 111 |
| introductions, images, react |
| Changing Colors in an SVG Element Using CSS and JavaScript (kir) | | 110 |
| colors, css, javascript |
| Let’s Make a Rubber Button With HTML, CSS, and SVG (tyl/clo) | | 109 |
| buttons, html, css, images |
| Please Size Your Inline SVGs (aar) | | 108 |
| images |
| SVG Gradients: Solving Curved Challenges (bro) | | 107 |
| images, gradients |
| Creating SVG Animations Using Tailwind CSS (mba+/sem) | | 106 |
| images, animations, tailwind |
| Understanding SVG Paths (nan) | | 105 |
| images |
| That Time When SVG Almost Got Network Support for Raw Sockets | | 104 |
| network, history |
| Unlocking SVG’s Superpowers (cas/btc) | | 103 |
| videos, images |
| Building an Animated SVG Logo With animejs (joz/pix) | | 102 |
| images, logos, animations, vuejs |
| Learn Images (wil/dev) | | 101 |
| courses, images, gif, png, jpeg, webp, avif |
| Easy SVG Customization and Animation: A Practical Guide (cod/sma) | | 100 |
| guides, images, animations |
| Creating a Custom Cursor Using CSS (css/ver) | | 99 |
| cursors, css, images |
| 6 Common SVG Fails (and How to Fix Them) (mar/css) | | 98 |
| images |
| Interactive SVG Reference (fff) | | 97 |
| images |
| Invisible Ink Effect With SVG Filters and CSS (che) | | 96 |
| code-pens, css, filters, effects |
| What I Learned About SVG Accessibility (Among Other Things) From NBC News’ Senate “What If” Project (joe) | | 95 |
| accessibility, images, lessons |
| SVG Sprites: Old-School, Modern, Unknown, and Forgotten (pep) | | 94 |
| images, sprites, performance |
| How to Scale SVG (ame/css) | | 93 |
| how-tos, images |
| Dreamy Blur (yua) | | 92 |
| css, effects |
| 8 Tricks for SVG Optimization (mar/uxd) | | 91 |
| images, tips-and-tricks, optimization |
| Vector Animations With Figma and SVG Animate (ms/uxd) | | 90 |
| animations, figma, images |
| Can SVG Symbols Affect Web Performance? (bms) | | 89 |
| images, performance |
| How to Animate SVG Shapes on Scroll (crn/cod) | | 88 |
| how-tos, css, animations |
| Magical SVG Techniques (sma) | | 87 |
| images, techniques |
| Optimizing SVG Patterns to Their Smallest Size (fin/css) | | 86 |
| images, performance |
| Using “mask” as “clip-path” (yua) | | 85 |
| css, masking |
| Creating Generative SVG Grids (tro/fro) | | 84 |
| javascript, grids |
| Building UI Components With SVG and CSS (sha) | | 83 |
| components, css |
| The Many Methods for Using SVG Icons (hui) | | 82 |
| css, images, icons |
| Wrapping Text Inside an SVG Using CSS (jay) | | 81 |
| css |
| Fractional SVG Stars With CSS (sam) | | 80 |
| css, images |
| Using SVG With Media Queries (web/sit) | | 79 |
| css, media-queries |
| Thinking About the Cut-Out Effect: CSS or SVG? (sha) | | 78 |
| css, techniques, effects, comparisons |
| OMG, SVG Favicons FTW! (ste) | | 77 |
| html, images, favicons |
| Adding Shadows to SVG Icons With CSS and SVG Filters (ola/css) | | 76 |
| css, images, icons, shadows, filters, effects |
| How to Use SVG Image Sprites (cra/sit) | | 75 |
| how-tos, images, sprites |
| Creating a Custom Cursor Using CSS? (fak) | | 74 |
| css, images, cursors |
| AVIF Has Landed (jaf) | | 73 |
| images, avif, performance, quality, jpeg, webp, png, comparisons |
| Accessible SVGs: Inclusiveness Beyond Patterns (car/sma) | | 72 |
| images, accessibility, tooling |
| How We Learned to Draw Text on HTML5 Canvas (mir) | | 71 |
| html, canvas, apis, javascript |
| A Practical Guide to SVG and Design Tools (mik/sma) | | 70 |
| guides, images, sketch, figma, adobe, tooling, design |
| SVG Circle Decomposition to Paths (sma) | | 69 |
| images, animations |
| Icon Fonts vs. SVGs—Which One Should You Use in 2018? (key) | | 68 |
| fonts, icon-fonts, images |
| GIF, PNG, JPG, or SVG: Which One to Use? (sit) | | 67 |
| images, jpeg, png, gif, webp, comparisons |
| What Is the Right Image Format for Your Website? (ant/sit) | | 66 |
| images, compression, jpeg, gif, png, webp |
| Align SVG Icons to Text and Say Goodbye to Font Icons (ell/pro) | | 65 |
| images, icons, icon-fonts, fonts, css, design, alignment |
| Know It All (d) | | 64 |
| websites, css, html, dom, javascript, cssom, nodejs |
| A Compendium of SVG Information (chr/css) | | 63 |
| overviews, images, link-lists |
| Random Interesting Facts on HTML/SVG Usage (cat/css) | | 62 |
| html, metrics, amp, google |
| SVG and Media Queries (jaf) | | 61 |
| images, css, media-queries, canvas, support, browsers |
| WordPress SVG Support: How to Enable SVGs in WordPress (src/sit) | | 60 |
| how-tos, wordpress, images |
| Accessible SVGs (hm/css) | | 59 |
| images, accessibility, examples |
| Practical SVG (chr/ali) | | 58 |
| images |
| Generating SVG With React (som/sma) | | 57 |
| react, javascript |
| Creating Cel Animations With SVG (hey/sma) | | 56 |
| animations, images, css, sass |
| SVG Lessons I Learned the Hard Way (sar/btc) | | 55 |
| videos, images, lessons |
| SVG Is for Everybody (chr/btc) | | 54 |
| videos, images |
| The Art of SVG Filters and Why It Is Awesome (sma) | | 53 |
| images, filters, css |
| Styling and Animating SVGs With CSS (sar/sma) | | 52 |
| images, css, animations |
| Making SVGs Responsive With CSS (sar/cod) | | 51 |
| images, responsive-design, css |
| Responsive Web Design, CSS Specificity, and SVG Knowledge (pmw/sit) | | 50 |
| responsive-design, sublime-text, css, javascript |
| Tips for Creating Accessible SVG (tin/sit) | | 49 |
| accessibility, images, tips-and-tricks |
| Shadow DOM | | 48 |
| shadow-dom, dom, images, angularjs, css, mathml |
| Rethinking Responsive SVG (puk/sma) | | 47 |
| responsive-design, images, css |
| Animating Vectors With SVG (bri/24w) | | 46 |
| images, animations, javascript |
| SVG Fallbacks (chr/css) | | 45 |
| images, support, browsers, png |
| SVG Filters on Text (css) | | 44 |
| images, filters, effects |
| Solving Rendering Performance Puzzles (jaf) | | 43 |
| javascript, performance, rendering |
| Media Queries Within SVG (tka) | | 42 |
| images, css, media-queries, support, browsers |
| Media Queries in SVG Images (gri/clo) | | 41 |
| images, css, media-queries |
| Using SVG (chr/css) | | 40 |
| images, css, support, browsers, examples, data-urls, tooling, link-lists |
| CSS Masks—How to Use Masking in CSS Now (sch) | | 39 |
| how-tos, css, masking, images |
| Resolution Independence With SVG (dbu/sma) | | 38 |
| images, css, responsive-design |
| A Farewell to CSS3 Gradients (ale/sit) | | 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 (sit) | | 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, 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 (hix) | | 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? (sit) | | 17 |
| flash, images, comparisons |
| A Milestone for SVG | | 16 |
| images, w3c |
| A New Face for the Web (zdn) | | 15 |
| images, flash |
| Confetti Generator (mag) | | 14 |
| tools, exploration, images, png, jpeg, code-generation, css |
| SVG to Data URI Converter (bay) | | 13 |
| tools, exploration, conversion, data-urls |
| JPEG to SVG Converter (ado) | | 12 |
| tools, exploration, conversion, images, jpeg |
| Wave-Style SVG Generator (zcr) | | 11 |
| tools, exploration, images, effects, code-generation |
| SVG URL Encoder (yok) | | 10 |
| tools, exploration, images, urls, code-generation |
| SVG Shape Generator (fff) | | 9 |
| tools, exploration, images |
| SVG Optimizer (Jake Archibald) (jaf) | | 8 |
| tools, exploration, images, optimization |
| SVG Optimizer (Daryll Doyle) (ens) | | 7 |
| tools, exploration, images, optimization |
| SVG Editor (ben) | | 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 (rit) | | 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 (ste) | | 1 |
| tools, analysis, conformance |
