How to Use SVG Image Sprites
Craig Buckler,
Canvas & SVG — SitePoint
Featured
Advertise with usRecent
How to Use SVG Image Sprites
Blogs
By Craig Buckler,
Sprites are popular for bundling graphics into a single file. And they can even be made with SVGs! Learn how SVG sprites work and why they're so awesome.
Canvas vs SVG: Choosing the Right Tool for the Job
HTML & CSS
By Maria Antonietta Perna,
Should you use Canvas or SVG? It depends! Let's walk through all the scenarios where Canvas and SVG are an option and work out which is the best choice.
How to Add Scalable Vector Graphics to Your Web Page
HTML & CSS
By Craig Buckler,
How should you add scalable vector graphics to a web page? Learn about six different methods, including inlining, image tags, iframes, and CSS backgrounds.
How to Draw Cubic Bézier Curves on HTML5 SVGs
HTML & CSS
By Craig Buckler,
The SVG path element offers a range of curve effects, and in this article, Craig Buckler demonstrates how to draw cubic bézier curves.
How to Draw Quadratic Bézier Curves on HTML5 SVGs
Programming
By Craig Buckler,
The SVG path element offers a range of curve effects. In his first tutorial, Craig demonstrates how to draw quadratic bézier curves.
How to Translate from DOM to SVG Coordinates and Back Again
HTML & CSS
By Craig Buckler,
Mix DOM and vector interactions in SVG, translating from SVG to DOM coordinates and back, and translating to transformed SVG coordinates.
CSS with SVG: Real World Usage
HTML & CSS
By Craig Buckler,
Craig explains how to add CSS styles to SVGs when used as static images, inlined backgrounds and HTML, sprites, HTML content effects and portable files.
How to Create Complex Paths in SVGs
Blogs
By Craig Buckler,
Craig Buckler demonstrates more advanced uses of the SVG path element, explaining how each of its various parts actually work.
Scalable Vector Graphics: Drawing Basics
HTML & CSS
By Craig Buckler,
Craig Buckler introduces SVG drawing basics, explaining the SVG viewbox, document structure, and how to draw shapes such as lines, circles, and rectangles.
What Is SVG? Your Guide to SVG Files
Design & UX
By Ivaylo Gerchev, Maria Antonietta Perna,
Learn why SVG is superior to pixel graphics in terms of scalability, responsiveness, interactivity, programmability, performance, and accessibility.
So, Do We Have a Winner for Code Challenge #1?
Web
By Alex Walker,
We've got CSS, SVG, canvas and JavaScript solutions to Code Challenge #1. Now it's time to pick a winner for the $200 Amazon Voucher.
UI Code Challenge #1 – Heartbeats
HTML & CSS
By Alex Walker,
The user interfaces we see in popular culture are often more fun than ones we build at work. Here's a code challenge to show us how you'd build your own.
A Practical Guide to CSS Variables (Custom Properties)
HTML & CSS
By Maria Antonietta Perna,
Maria Antonietta Perna walks you through CSS variables/custom properties, the awesome new technology that adds more flexibility and fun to CSS coding.
Frame by Frame Animation Tutorial with CSS and JavaScript
HTML & CSS
By Michael Romanov,
Michael Romanov explains how you can build a frame by frame animation with just HTML, CSS and JavaScript which performs well and works great on all browsers
Replaced Elements in HTML: Myths and Realities
HTML & CSS
By Adrian Sandu,
Adrian Sandu shares some myths and facts about HTML replaced elements and how browsers treat them according to the specifications.
SVG Tip: Create a Bold Vector Halftone Graphic in Under 2 Minutes
Design & UX
By Alex Walker,
Read SVG Tip: Create a Bold Vector Halftone Graphic in Under 2 Minutes and learn Design & UX with SitePoint. Our web development and design tutorials, courses, and books will teach you HTML, CSS, JavaScript, PHP, Python, and more.
6 Clever SVG Pattern Generators for Your Next Design
Design & UX
By Alex Walker,
Though SVG Patterns aren't super widely understood, they offer a lot of really interesting design options – once you get your head around them.
How to Optimize and Export SVGs in Adobe Illustrator
Design & UX
By Ivaylo Gerchev,
SVG is a powerful format but you need to make good decisions to get great results. Ivalyo walks you through exporting SVG in Adobe Illustrator.
Three Ways of Decreasing SVG File Size with SVGO
HTML & CSS
By Maria Antonietta Perna,
Maria Antonietta Perna discusses three ways in which you can use SVGO to optimize SVG graphics to be used on your website.
Design Tricks with SVG Filters: A Masked Blur Effect
Design & UX
By Alex Walker,
SVG might be a vector format, but it has some amazingly powerful pixel-based tricks up its sleeve. Follow Alex's journey – if you dare.
6 Free Web-Based SVG Editors Compared
Design & UX
By Ada Ivanoff,
SVG is more important to web design than ever before. Today we no longer need to leave our web browsers to create it. Ada looks at the options.
The Best Way to Create Fantastic ‘Invisible Pen’ Effects in SVG
Design & UX
By Ivaylo Gerchev,
Watching an SVG image drawn onto screen is powerful effect. Ivaylo shows you how to create the 'Invisible Pen' Effect in SVG using Vivus.js
‘Reskinnable’ SVG Symbols: How to Make Them (..and Why)
Design & UX
By Massimo Cassandro,
How can you create a single SVG graphic – maybe a logo or icon – that can be easily restyled and recolored in any setting or device? Massimo has a solution.
An Introduction to Chart.js 2.0 — Six Simple Examples
HTML & CSS
By Jack Rometty,
Jack Rometty takes you on a tour of Chart.js 2.0 and its various chart types. He includes plenty of easy-to-follow examples to drop in to your next project.
Why SVG Image Hosting is Hard (… and How to Do It)
Design & UX
By Alex Walker,
SVG is powerful, but finding a place to put your image is harder than it should be. Here's a scalable, reliable, free SVG image hosting method.
Make Your Own Responsive SVG Graphs & Infographics
Design & UX
By Alex Walker,
It doesn't matter how crisp your SVG text is if it's too small to be read. Responsive SVG lets you prioritize the important parts of you graphic.
Mastering SVG Patterns Without Breaking Your Brain (or Budget)
Design & UX
By Alex Walker,
SVG patterns are a great low-bandwidth tool for designers but setting them up can be hard. Alex shows how Boxy SVG makes things much easier.
Masking in the Browser with CSS and SVG
HTML & CSS
By Maria Antonietta Perna,
Maria Antonietta Perna looks at the various in-browser methods available for masking images with CSS and SVG.
Why JPEGs are like McDonalds Apple Pies (and SVGs are not)
Design & UX
By Alex Walker,
Sometimes it helps to think of SVG, not as an 'image format', but as a 'recipe'. And once you *really* know a recipe, you can start to change it.
Boxy SVG: A Fast, Simple, Insanely Useful, FREE SVG Editor
Design & UX
By Alex Walker,
SVG is hot but easily corrupted. Boxy SVG is a free editor that helps you make the most of what the SVG format is good at.