A Working SVG Workflow for Accessible Icons
HTML & CSS
By Kitty 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 & SVG — SitePoint
Recent
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.
Can SVG Save You from Your Fat PNG-32s?
Design & UX
By Alex Walker,
PNG-32 has glorious alpha-transparency support but the files are huge. Can help come from an unlikely hero – SVG?
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.
The Best Way to Create SVGs from Existing Artwork
Design & UX
By Alex Walker,
SVG is great but what's the best way to convert your existing JPEGs and PNGs into SVG format?
Indiana Jones and the Lost SVG Map Editor
Design & UX
By Alex Walker,
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.
The Great Icon Debate: Fonts Vs SVG
Design & UX
By Massimo Cassandro,
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.
The Final Nail in the Icon Fonts Coffin?
Design & UX
By Alex Walker,
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.
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.
A Close-up Look at the CSS mix-blend-mode Property
Design & UX
By Maria Antonietta Perna,
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.
Manipulating Images on Web Pages with CamanJS
Blogs
By Monty Shokeen,
Monty Shokeen recently discovered CamanJS, a Canvas-based image manipulation library. He showcases its features and demonstrates with a live example.
Create Data Visualizations in JavaScript using Dimple and D3
JavaScript
By Alexis Ulrich,
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
Add a Timeline to Your Website with Google Charts
Blogs
By Ashraff Hathibelagal,
Ashraff introduces Google Charts, which help you to put attractive, colorful, SVG-based charts on your pages using a specialized API.
Creating an Animated Valentine’s Day Card with Snap.svg
Design & UX
By Ivaylo Gerchev,
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.
Build Your Own SVG Icons
Design & UX
By Massimo Cassandro,
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.
HTML5 Video: Fragments, Captions, and Dynamic Thumbnails
JavaScript
By Armando Roggio,
Armando Roggio takes a look at three cool features of HTML5 video that you may not have used before.
Creating Beautiful Charts with Chart.js
JavaScript
By Aurelio De Rosa,
This article explores the Chart.js library, which, as the name suggests, is used to create charts.
Reading Images and Data Using Canvas and JavaScript
JavaScript
By Patrick Catanzariti,
This video will take you on a journey through the basics of how to read in canvas data dynamically using JavaScript.
A Graceful Fallback for SVGs in Old IE
Blogs
By Luke Haas,
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.
Google Web Designer: Production-Ready Tool or Toy?
Design & UX
By Zack Wallace,
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.
A Closer Look at SVG Path Data
Blogs
By Joni Trythall,
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.
Understanding the SVG fill-rule Property
Blogs
By Joni Trythall,
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.
The Challenge #1: The Winner
Design & UX
By Alex Walker,
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?
Dynamic Geo Maps with SVG and jQuery
JavaScript
By Massimo Cassandro,
Massimo Cassandro goes through the steps to create a nice SVG-based dynamic population map, with a little bit of jQuery.
Killer Backgrounds with Illustrator’s SVG Pattern Tool
Blogs
By James George,
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.
Getting Started with SVG Gradients
Blogs
By Joni Trythall,
An introductory but detailed look at the syntax for linear and radial gradients in SVG.
Create an Infographic Using Snap.svg
Blogs
By Ivaylo Gerchev,
SVG is great but cross browser consistency can be a challenge. Today, Ivaylo builds an infographic from scratch using the SNAP.svg framework.
The Designer’s Guide to Working with SVG – Pt 1
Blogs
By Alex Walker,
Often the generated SVG files we get from graphics apps are not well-suited for the web. Alex gives you the perfect intro to working with SVG.
Review: WebCode – A Better Way to Make SVGs?
Blogs
By Alex Walker,
WebCode is a Vector Graphics Editor designed from the ground up to make great SVGs. I've been using it a lot recently and thought I'd give you my views.
HTML5 Canvas Tutorial: An Introduction
JavaScript
By Ivaylo Gerchev,
An introduction to the canvas element, the canvas API, along with some reasons why it's a powerful technology. Plus some resources for further learning.