The Mijingo Blog

Latest news, updates, free tutorials, and more from Mijingo.

Animating SVG with JavaScript

by Ryan Irelan

Animating SVG with JavaScript is best achieved using a library that has a healthy amount of functionality and broad browser support. For our examples, we will use the Velocity.js JavaScript library.

Velocity is a lightweight library that “re-implements jQuery’s $.animate() for significantly great performance.”

Let’s jump right in and start animating our SVG.

The first thing we want to do is to tell Velocity which object we want manipulate. For our logo example, we’ll hook into it using the class names we assigned to the SVG shapes.

$(".two")
 .delay(500)
 .velocity({ fill: "#333", strokeWidth: 2})
 .velocity({rotateZ: "10deg"})
 .delay(500)
 .velocity({x: "+=20", y: "100%" });

View Intro to SVG: Example 20

In this example we are selecting the shapes (rect in this case) that have the class of two and then manipulating them. We start with a delay, change the fill color of the shape from white to a black, and then rotate the shape 10 degrees. After that we delay another 500ms and then animate the shape from its starting point to 100% (basically, off the canvas) by changing the x and y coordinates of the SVG shape.

Here’s an example with all of the SVG shapes transformed and moved off the viewport or canvas: View Intro to SVG: Example 21

Browser Support

Velocity.js works all the way back to Internet Explorer 8 and Android 2.3 on mobile devices.

Pick Your Tools and Use Them

by Ryan Irelan

From a recent Twitter series I shared:

Not everyone likes Sass or wants to use Grunt or even likes a CMS. That’s okay. If the tools help you, use them.

Important SVG Elements

by Ryan Irelan

There are a lot of elements–and attributes–to consider when writing SVG. But to get started, we don’t have to learn them all. Let’s review the most important ones you’ll encounter while working with generated SVG or SVG you coded yourself.

svg Element

You’re probably already very familiar with this. It’s the main element of SVG and inside of which you nest any shapes, paths, lines, etc. that you want to draw.

The SVG element defines the viewport or canvas for SVG content.

Here are some of the specific attributes for svg:

  • height - the height of the viewport
  • preserveAspectRatio - forces the aspect ratio so your image isn’t stretched when using the viewBox element to define a new coordinate system.
  • viewBox- Allows you to set a new coordinate system by defining where x,y coordinates where the system starts as well as the width and height.
  • width - The width of the viewport for this SVG element.

g Element

This element is used to create groups of SVG objects. For example, if you had a series of related rectangles (rect), you can group them together inside of a g element. The nice thing about this is that any transformations you apply to g apply to everything inside of the group.

The g element accepts all global attributes (like stroke, fill, etc).

circle Element

This element does exactly what it says in the name: it creates circles.

circle accepts three element-specific attributes:

  • cx - This attribute defines the x coordinate of the center of the shape.
  • cy - This attribute defines the y coordinate of the center of the shape.
  • r - Defines the radius of the circle.

rect Element

This is the elements we used in all our examples up to this point. It creates rectangles.

The rect elements takes the following attributes:

  • height - Defines the height the shape.
  • width - Defines the width of the shape.
  • x - The x coordinate where the shape should start drawing.
  • y - The y coordinate where the shape should start drawing.

line Element

The line element allows you to draw lines in SVG. Each line connects two points by setting x and y coordinates.

Here are the attributes available in line:

  • x1 - the start of the line on the x axis
  • y1 - the start of the line on the y axis
  • x2 - the end of the line on the x axis
  • y2 - the end of the line on the y axis

path Element

You’ll see the path element if you take an existing artwork and convert it to SVG (in Adobe Illustrator, for example). Illustrator converts the artwork to SVG by tracing the shapes in the image and converting them to SVG path elements.

Any shape can be created with the path element. It takes the following specific attributes:

  • d - this is the definition attribute, which defines the path to follow to create the shape. The path is defined using “path descriptions:” Moveto, Lineto, Curveto, Arcto, ClosePath.
  • pathLength - Use this attribute to define the total length of the path.

polygon Element

The polygon elements allows you to create any shape with many sides. A typical example would be an octagon. You plot the sides of the polygon using points (the only specific attribute for this element).

text Element

Use the text element to set text in your SVG. text takes the global style attribute, which you can use to apply styles (size, font, stroke, etc) to the text.

  • dx -
  • dy -
  • lengthAdjust -
  • text-anchor -
  • textLength - An exact value of the length of the text. This used for very specific layouts.
  • rotate - A list of numbers that will determine the rotation of the text.
  • x - the coordinate where the text begins
  • y - the coordinate where the text begins

textPath Element

The textPath element allows you to put text along a path element and have the text follow the shape. This is a classic SVG demo element because it can make text on a curve.

Did you like this review of SVG elements?

Invest a small amount of time to improve how you use SVG with our hands-on video course, Up and Running with SVG.

Get the video course

Why should you use SVG?

by Ryan Irelan

There are several reasons why SVG might be a good way to create some graphical assets on your website.

Scalable

It’s what the “S” stands for. Unlike traditional images (like PNG or JPG) SVG easily scales from small to big without loss of quality or fidelity. This is because the “V” part of the name–vector–describes the series of paths, shapes, and more that are created using connect points plotted on x-y axes.

You might have noticed that SVG has come back into favor recently among web designers and web developers because of a combination of better browser support (see below), improved screen resolution (like Retina screens on iPhone, iPads, and MacBooks) and Responsive Web Design.

File Size

Another reason to use SVG is because of a file size. SVGs are typically smaller files. For example, I took a large size version of my Mijingo logo and converted it to an SVG of the same canvas size. The PNG image was 30KB and the SVG image was only 6 KB. Big savings, especially if you working on a site that requires a lean performance budget.

Modifiable via CSS and JavaScript

Since SVGs aren’t bitmapped images, they’re easily modified using both JavaScript and CSS. This makes it simple to have a base SVG file and repurpose it in multiple locations on the site with a different treatment.

SVG images aren’t perfect for everything, however. Ideally, you’d use SVGs for icons, simple line graphics, and, if possible, logos. SVGs are ideal for imagery that are used multiple times on a page (like interface icons).

Do you want to learn more about SVG? Check out our course Up and Running with SVG to get started!

Automate SVG Export on OS X

by Ryan Irelan

In a recent tutorial on exporting SVG from the command line, we installed and used SVGExport.

What’s SVGExport?

A handy command line tool you can use to convert SVG files to PNG bitmap images is svgexport. It is available as a Node.js module and a command line utility.

With svgexport, we can easily pass in an SVG file–including any resizing options for the SVG viewport–and convert it to PNG, JPG, JPEG, or PDF of varying quality.

For this tutorial, I want to build a special folder on my computer Desktop that, when I drop an SVG file in, automatically converts the SVG to PNG. It will then move the original SVG file to a different directory and move the PNG to a different directory as a way to clean things up.

To accomplish this we are going to use Automator (Mac OS X only) and a shell script. If you’re not familiar with either, it’s not a problem. We’ll walk through both of them together.

Prerequisites

To move forward with this tutorial, please first install SVGExport via NPM.

If you’ve followed along on other courses I’ve done–like the one on JavaScript Task Runners–then installing a Node module via NPM should be old hat.

npm install svgexport -g

Also, you’ll need to be on Mac OS X so you have access to the built-in automation tool, Automator.

Setting up the Automator Folder Action

First, open Automator (available at /Applications/Automator) and create a new “Folder Action” project. There are a handful of different ways you can use Automator and a really nice option is to attach a script or series of actions to a folder.

We need to tell Automator to which folder to attach the actions. At the top, select the folder you want to use (or select “Choose…” to find any folder on your system).

I’m choosing a folder called svg2png that I created on my Desktop. The folder can be anywhere but I wanted it somewhere easily accessible.

While we’re in folder creation mode, let’s make two additional folders on our Desktop: one called source and one called processed. We’ll use these in the script to handle our input and output files.

Add Action

With the folder chosen, we now need to assign an action to it. Automator offers a generous buffet of actions to choose from–for system actions or app-specific actions–but we will keep it very simple and just use the “Run Shell Script” action.

Select the “Run Shell Script” action” from the left pane (available under Utilities) and drag it over to the right pane so it’s part of the Folder Action automation.

Make sure that /bin/bash is chosen as the option for “Shell” and “Pass Input” is set to “as arguments.” Now we’re ready to write the script!

Write the Shell Script

The shell script is fairly straight-forward but might be new to you, so I’ll explain it line-by-line. Here’s the whole script:


PATH=/usr/local/bin:/bin export PATH
for f in "$@"
do
  nf="${f%.svg}.png"
  svgexport "$f" "$nf" png 100% 0.5x
  mv "$f" ~/Desktop/source/
  mv "$nf" ~/Desktop/processed/
done

To make things run smoothly, we want to add our system path to the top of the shell script. This allows us to call commands without the full paths and makes Node happy (which is what was used to install svgexport).

At the top of the shell script (put this in the field in the “Run Shell Script” action), we’ll add our path line.

PATH=/usr/local/bin:/bin export PATH

Now we need to tell the script to process anything that gets dropped in the folder. We do that using a for loop and we loop over an arguments array ($@):

for f in "$@"

Next up is the meat and potatoes of our Folder Action: the part of the script that processes the files and runs them through SVGExport.


do
  nf="${f%.svg}.png"
  svgexport "$f" "$nf" png 100% 0.5x
  mv "$f" ~/Desktop/source/
  mv "$nf" ~/Desktop/processed/
done

Let’s unpack this to understand what’s going on.

nf="${f%.svg}.png"

First, I’m assigning the variable nf the original filename of the SVG we passed in but replacing the .svg extension with a .png extension.

svgexport "$f" "$nf" png 100% 0.5x

The next line runs the svgexport command (we don’t have to specify the full path to it because we included our system path at the top of the script). We’re using the $f variable whose value is the file of the current loop through the array as the source and the $nf variable we set earlier as the output file name. The rest of the line is standard svgexport.


mv "$f" ~/Desktop/source/
mv "$nf" ~/Desktop/processed/

Finally, we move the source file ($f) to the source folder on our Desktop and the move the processed PNG file ($nf) to the processed folder on our Desktop.

Add done at the end to close the loop and we’re done!

Automator window for exporting SVG as PNG

Saving and Testing

Save the Folder Action automation in Automator. Now it’s time to test it out. Find an SVG file and drag and drop it (or copy and paste it) into the svg2png folder. You should see a small, spinning gear appear in your menu bar. Once the automation is complete the gear will disappear.

We check our processed folder to see if the PNG file is there. Success!

This script could be enhanced and made better. For example, I’m doing any error checking here to accounting for missing files, duplicate files, etc.

Troubleshooting

If we run into problems, we can test the automation right inside of Automator by explicitly passing a file to the “Run Shell Script” action. We use the “Get Specified Finder Items” action (dragging it above the “Run Shell Script” action), choosing an SVG file to test with, and then running the automation manually.

Using Get Specified Finder Items in Automator to test

Some common problems we might see:

  • Path problems (script can’t find command) if the system path is missing from the top of the script
  • Missing directories that are called in the script (processed, source)
  • SVGExport isn’t installed
  • Not setting “Pass input” as “arguments” for the Shell Script action

For more information about how to get started with SVG, check out our comprehensive course Up and Running with SVG.

Exporting SVG from the Command Line with Inkscape

by Ryan Irelan

I’ll go ahead and say this up front: using Inkscape isn’t the most desirable method. Not because Inkscape is an unreliable tool but because it requires that the Inkscape app and X11 app are both installed. Inkscape is a cross-platform application so it runs on X-Windows and provides a non-native app experience.

But if you are already using Inkscape to draw your SVGs, then you would be best served scripting the command line tool of the tool that you already have open.

There are two ways to interact with Inkscape from the command line:

  1. Using the Inkscape interactive shell mode
  2. Running the inkscape command line tool

The interactive shell mode is enabled by running inkscape --shell.

If you want to do scripting (like bash scripting) to batch process images, the command line tool is your best option.

On OS X, the command line utility is located inside of the Inkscape application package, which you can find at: /Applications/Inkscape.app/Contents/Resource/bin. If you want to call this like I do below, you’ll want to add the location to your system path.

Using the same file we used in the tutorial on using svgexport, here’s how to convert an SVG to PNG with the Inkscape command line utility:

inkscape -z css3-fundamentals.svg -e css3-fundamentals.png

The first part calls the inkscape utility. The -z option is supposed to suppress the Inkscape GUI. This sort of worked for me, but still required X11 on OS X to launch.

The -e option tells Inkscape that we want to covert to a PNG image. And, then we pass in the name and extension of the destination image.

This SVG to PNG conversion method is very reliable if you already have Inkscape installed. If you don’t run Inkscape already then you might want to check out my tutorial on exporting SVG with SVGExport.

Learn more about SVG with our comprehensive course: Up and Running with SVG

Exporting SVG from the Command Line with SVGExport

by Ryan Irelan

A handy command line tool you can use to convert SVG files to PNG bitmap images is svgexport. It is available as a Node.js module and a command line utility.

With svgexport, we can easily pass in an SVG file–including any resizing options for the SVG viewport–and convert it to PNG, JPG, JPEG, or PDF of varying quality.

Installing svgexport

If you’ve followed along on other courses I’ve done–like the one on JavaScript Task Runners–then installing a Node module via NPM should be old hat.

npm install svgexport -g

That will install the utility globally so you have access to it anywhere.

Okay, let’s get to covertin’.

Converting One SVG to PNG

I have some new artwork in SVG format for Mijingo courses that I want to use on the site. But before I can an image I need to convert the SVG to PNG to use as fallback image (and in other instances, like email campaigns).

In this example we will convert one SVG image to a PNG. We’ll pass an explicit file and specify an output file name.

svgexport css3-fundamentals.svg css-fundamentals.png png 100% 500:648 250:324

There are a few parts to this command, let’s break it down.

svgexport [input file] [output file] [format] [quality] [input viewbox] [output size]

The first part, svgexport, is, of course, the command we are running. After that we pass it the file we want to covert (our SVG file). We need to specify the quality, too. The range is 1-100% and we’ll make it full quality at 100%.

The last two options are for sizing. Sizing options are set with the width:height pattern.

First, we specify the viewbox of the input file. According to the svgexport package instructions, the viewbox will be inferred from the source file unless we specify one. I like to be explicit in my commands, so as to leave nothing for chance, so I’m going to set the viewbox option.

Finally, we set the output size of the image. For my needs right now I need the output size to be exactly half.

Here’s the command we’ll run in a directory that contains the css3-fundamentals.svg file:

svgexport css3-fundamentals.svg css-fundamentals.png png 100% 500:648 250:324

Let’s run that command. You should see an output similar to this:

/Users/ryan/Desktop/covers/css3-fundamentals.svg /Users/ryan/Desktop/covers/css3-fundamentals.png png 100% 0.5x 0:0:500:648 250:324

Another option is to use a scale option instead of specifying the exact height width of the final image. I know this SVG is 500x648. I want to make it half that size. Instead of specifying 500x648, I could also use 0.5x as the scale. You can see this in the output from our first command.

svgexport css3-fundamentals.svg css-fundamentals.png png 100% 500:648 0.5x

The output (both the file and what is returned on the command line) is the same as the first command. My preference is to always be explicit because if I try to pass in a larger SVG than 500x648 and use the 0.5x scale option than my final PNG will not be what I need.

However, the scale option can be handy if you need to resize multiple images of different sizes. In that case we would leave out the viewbox option and let svgexport use whatever is specified in the SVG file code.

svgexport css3-fundamentals.svg css-fundamentals.png png 100% 0.5x

This is particularly handy if you have a series of images of different sizes that you want to just scale half size.

Converting to Other Formats

svgexport also lets you export to other formats like JPG, JPEG, and PDF. It’s the same command as before but just use a different format value (pdf for example). If you leave out the file format, svgexport will default to PNG files. I like to be explicit in my commands so it’s clear what I’m doing (especially if this is part of script that I’m leaving behind for someone else). Therefore, I always specify the image format even if it’s the one that is the default. Defaults are good but not if they create confusion.

The Options Available

To get all of the options available for the svgexport command, I like to review the documentation that comes with it. You can get that by running:

svgexport

On my installation of svgexport there’s no documentation available using the man command, but just typing svgexport on its own will output the command usage.

In an upcoming tutorial I’ll cover how to script this so we can batch process SVGs in a directory, converting them all to PNG files.

If you use Inkscape, check out the tutorial on exporting SVGs with the Inkscape command line utility.

Learn more about SVG with our comprehensive course: Up and Running with SVG

SVGO Exporter for Adobe Illustrator

by Ryan Irelan

A new project from David Deraedt called SVG NOW that is an alternative SVG exporter for Adobe Illustrator. This is great news because the code that comes out of Illustrator isn’t as optimized as it could be.

The exporter uses SVGO, so you’ll presumably get (it is in beta and still under development) all of the goodness that is SVGO right inside of Illustrator. Including the SVGO plugins that are available and enabled by default.

From the README file:

It is built on top of Illustrator’s SVG exporter, controls some of its parameters and default values, and runs a customized version of SVGO (node module) with an HTML GUI built on top of it to control its plugins.

Follow the project on Github

Optimize SVG with Grunt

by Ryan Irelan

I wrote up short tutorial and created a video showing how to use svgmin to optimize your SVG files as part of your Grunt workflow.

The svgmin Grunt plugin is built on SVGO (a tool I use in my SVG tutorial course) and it’s a great way to automate optimization of your SVG the same way you would your optimize bitmap images using imagemin with Grunt or Gulp.

Read the whole tutorial or watch the video below.


Want to learn more about SVG? The SVG course will get you started with everything you need.

How to Convert an Existing PNG or GIF Image to SVG Vector

by Ryan Irelan

Let’s learn a bit about using online tools to convert images to vectors.

Sometimes you have an image, like a logo, and you need it converted to SVG. Ideally, you’d open up the source file in Adobe Illustrator or another vector capable app.

But, as we’ve all seen in a project, sometimes the source files aren’t available and we have to make do with what we have.

Let’s say I wanted to convert my company logo to an SVG but all I had was a PNG. How do I do that?

Online Conversion Tools

The simplest way is to use an online conversion tool. But: beware of the image to SVG conversion tools online.

Some of them do not actually convert the image to SVG, which requires retracing the image and turning it into a set of coordinates and lines, but instead just encodes the image as base64. That’s fairly easy to do without needing an online tool and doesn’t help us at all on our goal of creating a real SVG file, not another form of a bitmap image.

Vector Magic

The best online tool I’ve found for converting images to SVG is Vector Magic. This service actually traces and plots the images into SVG. Vector Magic does a nice job and allows you to compare the original image and the new vector image. It then spits out the SVG code you need to use to display your logo or image as an SVG.

Using the online tool Vector Magic to convert image to vector

I only tried it with the Mijingo logo, but it probably works best with simple line-based artwork, like logos or icons.

Ready to learn more about SVG?

Learn more about SVG with my video course Up and Running with SVG. It will teach you everything you need to know to get started.

Learn SVG Today

Learning SVG with Mijingo

by Ryan Irelan

Hello Mijingo campers!

I just released a new course called Up and Running with SVG.

The course covers everything you need to know to get start creating and using SVG in your web projects. It is 100 minutes long, 11 videos, features dozens of code examples, and a 30+ page PDF course handbook.

Here’s a preview of the course:

Up and Running with SVG is available now to add to your course library.

Helpful Links and Resources on SVG

by Ryan Irelan

I’ve been doing research and planning on a new course covering SVG. Here are some great resources I found while combing through hundreds of links on Pinboard and search results from Google.

If you want to learn about when the new Mijingo course on SVG will be released, follow us on Twitter or sign up for your email announcement list:

What are our customers saying?


"Just purchased your Flexible Twig course. Love it!"
Tyler Morrison
"Been enjoying @mijingo 's Learning Craft video tutorials. Feeling like I've got a good basic understanding of #craftcms Very impressive"
Laura Montgomery
"I bought your Craft Starter Pack a year and a half ago. Worth every dollar. In fact, I would've paid twice as much for it, because you saved me so much time."
Timothy Ingram
"Ben's knowledge of Craft combined with his relaxed and informal teaching style makes for a great learning experience."
Steve Abraham
"Ben puts a lot of thought into his teaching approach and has the ability to explain complex concepts in a way that just make sense"
Gareth Redfern
"Ben is great at taking a complex subject and breaking it down in a way that you can wrap your mind around. I thought that plugin development was something I would never understand, and happily Ben proved me wrong!"
Jonathan Melville
"I really appreciate all the videos and writing you have done. Your work has given me a jump start on my front end development business."
Shan Ricciardi

Perfect for Small Teams & Companies


Mijingo's courses are perfect as the training curriculum for both small teams and entire companies.

Our courses are offered in Team Packs (up to 5 people) and Company Packs (up to 25 people), so you can make one simple, fast purchase to train your entire staff.

Prices are listed with each course. Need more than 25 or something custom?

Send Your Requirements
Team Pack2-5 People
Company Pack6-25 People
Custom Pack25+ People