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

Articles Tagged
SVG

206 Articles
{
,

}
Direct link to the article SVG Fallbacks
SVG

SVG Fallbacks

UPDATE: Here’s a more comprehensive guide to SVG fallbacks we’ve published.

There is a very clever technique by Alexey Ten on providing an image fallback for SVG going around the internet recently. It does just what you want in …

Avatar of Chris Coyier
Chris Coyier on Aug 19, 2013 (Updated on May 4, 2015)
Direct link to the article SVG Filters on Text
filter SVG svg filters text effect

SVG Filters on Text

The following is a guest post by Chris Scott. Chris was messing around with SVG filters and how they can be applied to text. I thought this was quite interesting because SVG filters are quite a bit different than …

Avatar of Chris Scott
Chris Scott on Aug 9, 2013 (Updated on Aug 29, 2018)
Direct link to the article SVG Patterns Gallery
SVG

SVG Patterns Gallery

Using SVG for background patterns is great because they 1) are very small 2) are vector, thus crisp at any screen resolution and 3) work in IE 9 (unlike gradients). Gallery by Philip Rogers.…

Avatar of Chris Coyier
Chris Coyier on Apr 1, 2013 (Updated on Oct 24, 2014)
Direct link to the article Using SVG
SVG svg filters svg icons

Using SVG

SVG is an image format for vector graphics. It literally means Scalable Vector Graphics. Basically, what you work with in Adobe Illustrator. You can use SVG on the web pretty easily, but there is plenty you should know.…

Avatar of Chris Coyier
Chris Coyier on Mar 5, 2013 (Updated on May 2, 2019)
Direct link to the article Hamburger Menu Icons (Three Line Menu Icon / Navicon) Different Ways
hamburger icons navigation SVG

Hamburger Menu Icons (Three Line Menu Icon / Navicon) Different Ways

A universal symbol for “menu” has been on a lot of people’s minds lately. (“Navicon”, get it?!). Jordan Moore wrote up a big article on it for Smashing Magazine. Jeremy Keith wrote about it. Stuart Robson wrote about it…

Avatar of Chris Coyier
Chris Coyier on Oct 10, 2012 (Updated on Jan 10, 2020)
Direct link to the article Animated 3D Objects Without SVG or Canvas
SVG

Animated 3D Objects Without SVG or Canvas

One of the ways you can make a triangle with CSS is by using a 45-degree angle gradient on an element that goes from from colored to transparent with an hard split at the half-way point. Then you can use …

Avatar of Chris Coyier
Chris Coyier on May 24, 2011 (Updated on Oct 24, 2014)
Direct link to the article HTML5 Pack for Illustrator CS5
SVG

HTML5 Pack for Illustrator CS5

Via Real World Illustrator:

You can designate certain attributes (i.e., fill, stroke, opacity) as variables right from the Appearance panel in Illustrator. When saved as SVG, developers can easily change the variable definition to “reskin” or modify the art

…
Avatar of Chris Coyier
Chris Coyier on Sep 13, 2010 (Updated on Oct 24, 2014)
Direct link to the article High DPI Monitors, Resolution Independance, The Web, and You
SVG

High DPI Monitors, Resolution Independance, The Web, and You

We all use 72 DPI as a defacto standard when creating web graphics (actually, “PPI” is the more appropriate acronym but rarely used). This used to be the actual resolution of monitors, but slowly over the years this has ceased …

Avatar of Chris Coyier
Chris Coyier on Nov 3, 2008 (Updated on Oct 24, 2014)
  • Newer
  • 1
  • ...
  • 17
  • 18
  • 19

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • About DO
  • Cloudways hosting
  • Legal stuff
  • Get free credit!
CSS-Tricks
  • Write for us!
  • Advertise with us
  • Contact us
Social
  • RSS Feeds
  • CodePen
  • Mastodon
  • X
Back to Top