Skip to main content
CSS-Tricks
  • Articles
  • Videos
  • Almanac
  • Newsletter
  • Guides
  • Books
Search Account

Articles Tagged
SVG

182 Articles
{
,

}
Direct link to the article Going Beyond Automatic SVG Compression With the “use” Element
compression SVG

Going Beyond Automatic SVG Compression With the “use” Element

If you draw your own SVG files or if you download them from the internet, tools like this SVG-Editor or SVGOMG are your friends. Compressing the files with those tools takes only few seconds and reduces your file size a …

Avatar of Mariana Beldi
Mariana Beldi on Jan 27, 2020
Direct link to the article Simple Image Placeholders with SVG
images SVG

Simple Image Placeholders with SVG

Direct Link

A little open-source utility from Tyler Sticka that returns a data URL of an SVG to use as an image placeholder as needed.

I like the idea of self-running utilities like that, rather than depending on some third-party service, like placekitten…

Avatar of Chris Coyier
Shared by Chris Coyier on Jan 27, 2020
Direct link to the article A Trick That Makes Drawing SVG Lines Way Easier
path stroke stroke-dasharray SVG

A Trick That Makes Drawing SVG Lines Way Easier

When drawing lines with SVG, you often have a <path></path> element with a stroke. You set a stroke-dasharray that is as long as the path itself, as well as a stroke-offset that extends so far that the entire stroked …

Avatar of Chris Coyier
Chris Coyier on Jan 14, 2020 (Updated on Feb 28, 2020)
Direct link to the article Animate Text on Scroll
SVG SVG animation

Animate Text on Scroll

We covered the idea of animating curved text not long ago when a fun New York Times article came out. All I did was peek into how they did it and extract the relevant parts to a more isolated demo.…

Avatar of Chris Coyier
Chris Coyier on Jan 13, 2020
Direct link to the article How to Animate on the Web With GreenSock
animation GreenSock GSAP SVG web animation

How to Animate on the Web With GreenSock

There are truly thousands of ways to animate on the web. We’ve covered a comparison of different animation technologies here before. Today, we’re going to dive into a step-by-step guide of one of my favorite ways to get it done: …

Avatar of Sarah Drasner
Sarah Drasner on Jan 13, 2020 (Updated on Jan 20, 2021)
Direct link to the article A CSS Tribute to SVG
css for svg SVG

A CSS Tribute to SVG

Direct Link

This demo from Jérémie Patonnier is incredible. Make sure to look at it in Firefox because some Chrome bug apparently prevents the entire thing from working.

The big idea is that the entire demo is one <rect> element. That’s it. …

Avatar of Chris Coyier
Shared by Chris Coyier on Dec 30, 2019
Direct link to the article Dark Mode Favicons
favicon SVG

Dark Mode Favicons

Oooo! A bonafide trick from Thomas Steiner. Chrome will soon be supporting SVG favicons (e.g. <link rel="icon" href="/icon.svg"/>). And you can embed CSS within an SVG with a <style></style> element. That CSS can use a perfers-color-scheme media query, and …

Avatar of Chris Coyier
Chris Coyier on Dec 3, 2019 (Updated on Dec 5, 2019)
Direct link to the article The Amazingly Useful Tools from Yoksel
clip-path mask SVG

The Amazingly Useful Tools from Yoksel

I find myself web searching for some tool by Yoksel at least every month. I figured I’d list out some of my favorites here in case you aren’t aware of them.…

Avatar of Chris Coyier
Chris Coyier on Nov 15, 2019
Direct link to the article When to Use SVG vs. When to Use Canvas
canvas SVG

When to Use SVG vs. When to Use Canvas

SVG and canvas are both technologies that can draw stuff in web browsers, so they are worth comparing and understanding when one is more suitable than the other. Even a light understanding of them makes the choice of choosing one …

Avatar of Chris Coyier
Chris Coyier on Nov 12, 2019
Direct link to the article A Snippet to See all SVGs in a Sprite
icon system sprites SVG

A Snippet to See all SVGs in a Sprite

I think of an SVG sprite as this:

<svg display="none">
  <symbol id="icon-one"> ... </symbol><symbol>
  </symbol><symbol id="icon-two"> ... </symbol><symbol>
  </symbol><symbol id="icon-three"> ... </symbol><symbol>
</symbol></svg>

I was long a fan of that approach for icon systems (<use></use>-ing them as needed), …

Avatar of Chris Coyier
Chris Coyier on Oct 8, 2019
Direct link to the article The Many Ways to Link Up Shapes and Images with HTML and CSS
clip-path css shapes links SVG

The Many Ways to Link Up Shapes and Images with HTML and CSS

Different website designs often call for a shape other than a square or rectangle to respond to a click event. Perhaps your site has some kind of tilted or curved banner where the click area would be awkwardly large as …

Avatar of Bailey Jones
Bailey Jones on Oct 1, 2019 (Updated on Oct 10, 2019)
  • Newer
  • 1
  • ...
  • 2
  • 3
  • 4
  • ...
  • 17
  • Older
Our Learning Partner
Frontend Masters logo
Frontend Masters

Need front-end development training?

Frontend Masters is the best place to get it. They have courses on all the most important front-end technologies, from React to CSS, from Vue to D3, and beyond with Node.js and Full Stack.

CSS-Tricks is created by Chris and a team of swell people.

Keep up to date on web dev

with our hand-crafted weekly newsletter

Tech
  • WordPress (CMS)
  • Jetpack (Search, Backup)
  • WooCommerce (eCommerce)
  • Local (Development)
Hosting
  • Flywheel
Family
  • CodePen
  • ShopTalk Show
Minisites
  • The Power of Serverless
  • Upcoming Conferences
  • Coding Fonts
Contact
  • Email
  • Sponsorship Info
  • Guest Writing
Buy
  • Posters & Swag
  • Membership
Follow
  • Twitter
  • Instagram
  • YouTube
  • CodePen
  • GitHub
  • iTunes
  • RSS
Back to Top