SVG 101: What Is SVG?
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.
Canvas & SVG — SitePoint
Recent
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.
CSS with SVG: Real World Usage
HTML & CSS
By Craig Buckler,
Craig Buckler describes various ways to use CSS with SVG, covering the benefits of using SVGs, a range of SVG tools, SVGs as static images, CSS inlined SVG backgrounds, responsive SVG images, HTML-inlined SVG images, SVG sprites, SVG effects on HTML content, and portable SVGs.
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.
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.
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.
How to Translate from DOM to SVG Coordinates and Back Again
HTML & CSS
By Craig Buckler,
Craig Buckler looks at the tricky problem of managing both DOM and vector SVG interactions in your next project.
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.
A Working SVG Workflow for Accessible Icons
HTML & CSS
By Hugo Giraudel,
Hugo has been working on creating a simple and automated workflow for dealing with creating accessible icons using SVG. He shares it in this post.
Canvas vs. SVG: Choosing the Right Tool for the Job
HTML & CSS
By Maria Antonietta Perna,
SVG is all the rage these days, but does that mean Canvas is obsolete? Maria takes a look at how each technology works so you can make the right choice.
Parallax Burns: Converting Photographs from 2D to 3D with SVG
Design & UX
By Alex Walker,
There's a nice video effect I'm going to call 'Parallax Ken Burns' you see on a lot of documentaries. Can we mimic it in a single SVG file? Maybe.
Introduction to jCanvas: jQuery Meets HTML5 Canvas
HTML & CSS
By Maria Antonietta Perna,
Using lots of demos, Maria Antonietta Perna discusses many of the features of jCanvas, a jQuery plugin to make it easier to work with the HTML5 Canvas API.
Fancy, Responsive Charts with Chart.js
HTML & CSS
By Monty Shokeen,
Monty Shokeen takes a deeper look at the features of Chart.js, creating a fancy line graph and bar graph along the way.