Canvas & SVG

Maria Antonietta Perna looks at the various in-browser methods available for masking images with CSS and SVG.

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. 

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.

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.

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.

PNG-32 has glorious alpha-transparency support but the files are huge. Can help come from an unlikely hero – SVG?

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.

SVG is great but what's the best way to convert your existing JPEGs and PNGs into SVG format?

From Casablanca to Game of Thrones, maps have been used to help tell stories. AMCharts Pixel Map Editor lets you create customized SVG maps with ease.

Fonts have been a convenient place to store our vector icons – but is it the *right* place? Massimo asks if it's time to move to SVG.

Vectors are a great option for icons but the decision between icon fonts and SVG is a hard one. Now Seren Davies has raised some new issues with icon fonts.

Monty Shokeen takes a deeper look at the features of Chart.js, creating a fancy line graph and bar graph along the way.

Maria Antonietta Perna has created some visual examples and demos to help understand CSS's cool new mix-blend-mode property and how it can be used today.

Monty Shokeen recently discovered CamanJS, a Canvas-based image manipulation library. He showcases its features and demonstrates with a live example.

Alexis Ulrich shows you how to create eye-catching data visualizations with dimple.js so your message stands out from today's mass of competing data streams

Ashraff introduces Google Charts, which help you to put attractive, colorful, SVG-based charts on your pages using a specialized API.

Today for Ivaylo, 'SVG' means 'Soppy Valentines Guy'. His Snap.svg tutorial shows you how to animate and randomize SVG – with a touch of romance.

Most of us know that web fonts are a great way serve scalable, flexible icons, but Massimo is here to show you how SVG icons can be even more powerful.

Armando Roggio takes a look at three cool features of HTML5 video that you may not have used before.

This article explores the Chart.js library, which, as the name suggests, is used to create charts.

This video will take you on a journey through the basics of how to read in canvas data dynamically using JavaScript.

If you're still supporting IE8 or lower, Luke Haas has a couple of quick suggestions on how to handle SVGs in those older browsers, should the need arise.

It's almost a year since Google launched 'Google Web Designer'. Zack takes it for a workout to see how it stacks up with a real-world project.

Joni Trythall takes a detailed look at path data in SVG, breaking down the different parts of the code to make it more familiar and easier to work with.

Joni Trythall demystifies using the SVG fill-rule property, and how it can further define our intentions for what is to be considered the inside of a shape.

It's time to judge the best solution entered for our first challenge. We got some clever ideas using very differing technologies. Which one worked best?

Massimo Cassandro goes through the steps to create a nice SVG-based dynamic population map, with a little bit of jQuery.

Patterns are as old as art itself, but SVG opens up a raft of new possibilities online. James shows us some new tricks using Illustrator's Pattern Tool.

An introductory but detailed look at the syntax for linear and radial gradients in SVG.

SVG is great but cross browser consistency can be a challenge. Today, Ivaylo builds an infographic from scratch using the SNAP.svg framework.