Imagine sending email by typing in MS Word and sending the message over as a screenshot. Seems silly, right? But for many web designers, artists, and bloggers, that’s been our situation when designing vector graphics. You could compose scalable icons, but would need to export them as raster images for websites. Many logos were originally created in Illustrator, but then designers crop them and save them as .JPGs and .PNGs for web destinations. Resizing and/or changing a color became an entire process that started with going back to the source file, which is the MS Word document in my email analogy. You would make the desired changes, output the series of images, and re-upload all those files to your server.

Thankfully, that’s all changed. While scalable vector graphics (SVG) were introduced in 2001, only recently has the image format displayed consistently on the web, leading me to the first reason why the SVG format is kicking data and taking names.

 

Why SVGs are made of dreams

1) SVGs are widely supported

SVGs are growing in popularity and compatibility on websites. In general, all major browsers support SVGs at a basic level. SVGs do come with some limitations, but what doesn’t? When facing compatibility inconsistencies, you can live with them, have a fallback, or use JavaScript to bypass those shortcomings. For example, Microsoft’s Internet Explorer and Edge don’t provide functionality for CSS animations that make use of the transform property. Explorer and Edge will simply ignore those instructions and still render the graphics statically. That’s not a big deal as long as that doesn’t break functionality. The other capable modern browsers will display the intended movement and animation, and users will enjoy the visual progressive enhancement.

 

2) SVGs are speedy

SVGs are generally small in file size, and thus download faster than raster images. Also, inline SVG code can be placed in HTML directly and cut down on server requests. You need millions of pixels to fill a screen with a digital photograph on common-sized monitors, while you can make colorful full-screen SVG backgrounds with a fraction of the file size.

 

3) SVGs scale perfectly

They’re scalable – it’s in the name. With responsive design becoming the new norm over the last ten years, websites need to consider various screen sizes. Graphics that scale automatically are a welcome tool on the web for this very reason. Raster graphics —think JPGs, PNGs, and GIFs— on the other hand, cannot scale bigger without becoming blurry. And even though you can shrink photos on websites decently, your browser is downloading an image at the bigger than necessary file-size.

 

4) SVGs are high resolution

They look great at any resolution, and that’s important as higher-resolution devices become more popular. Your computer lacks the fictional CSI software that can zoom into images beyond their resolution without pixelation or getting blurry. Raster photos are composed of colored squares within a grid, unlike SVGs which are calculated through math to fit the current screen resolution.

 

5) SVGs can be styled through CSS

CSS is the way to style websites, and it is more powerful than ever. You can even style raster images, though effects target the entire image and may not be very practical. Like, how many websites really need to display an inverted image or change the hue? Blurs, opacity, sepia, grayscale, and brightness may have a place, though it is more common for designers to style elements around image, such as a colorful image overlay. SVGs on the other hand are written in XML and that means you can target bits and pieces that make up the entire SVG. You can change the color of an icon or re-position the direction of an arrow within an icon. You could hide and show reusable vector stars as part of a rating system. You can place many of these properties on mouse hovers for easy animations, which brings us to the next point…

 

6) SVGs can be animated

Raster images can look impressive, but unless you delve into video or gifs that come with large file sizes, animating digital photos is limited. Unlike raster images, SVGs are made up of smaller parts that can be manipulated. Picture a simple smiley face. In the SVG format, there would likely be a yellow circle for the head, perhaps two black circles for eyes, along with a curved line for a mouth. You could target any of those shapes to animate, and could make an eye wink by simply decreasing its height.

A more practical use is animating company logos. Many years ago, you were limited in hover effects. If a website visitor hovered over a logo, perhaps using a transparent .png logo, you could animate the background changing color. Now, with SVG, you can spin the logo mark, while changing letter color in delayed succession, and increasing the logo’s overall size.

 

7) SVGs can be rearranged easily

When preparing images for the web, the dimensions are often determined by the destination. Sometimes one website will want your image as a square – like Instagram – while others require portrait or landscape orientations. With raster images, you may have to crop images in ways that hide certain elements. However, with vector graphics, you can simply re-position and re-size elements around varying dimensions.

If you download free stock photographs and free vector graphics, you can make color edits to match your company branding. With vector graphics, you can do it with the click of a button, but with raster images, you have to work to recolor section by section.

 

8) SVGs support transparency

Not all raster formats allow transparency, and those that do come with some drawbacks liked jagged edges with .GIF or hefty file-size with PNG. Transparency works well with SVGs, and is one of the main reasons I use SVGs for company logos on websites. It allows simple hover effects for the background of the logo. Transparency is a great way to break away from rectangular graphics and blocky websites. It is easy to see, transparency is great.

 

9) SVGs are great for readability

How common are hero images? Hero images are those full-screen images (or videos) that welcome visitors on websites, especially on homepages. Often, text appears over the visual, and even though it’s usually large and bold, sometimes readability is sacrificed in the name of hip visuals. SVGs integrate into websites in a way that doesn’t force designers to place text over them. Photographs come with boundaries, whereas you can simply pull specific elements of imagery onto the webpage in a way that you can’t with photographs.

Regardless, for a fair comparison, let’s assume the imagery takes up the whole screen whether as a raster or vector graphic. In either case, there are certain visual choices that can help or hurt readability. You obviously shouldn’t put white text over very light imagery. You also shouldn’t place thin or intricate fonts over imagery that has varying jumps of high contrast, such as text over a bare tree. This last point is where SVG shines. Photography comes with fine details, noise, and uneven contrasts that are not ideal to overlay with text. SVGs, however, often use flat design and solid colors, which are more suitable behind text. With responsive design, text over images doesn’t always line-up consistently from device to device, so it is important that background visuals contain less noise.

 

10) SVGs stand out

In a world where seemingly everyone carries around a device that hosts TWO camera lenses, photographic imagery is widely used on amateur and professional websites alike. Everyone has access to free professional-grade photographs at their finger tips. There’s also Google images for those with no moral compass or fear of lawsuit. Photographs are more commonly used on websites than vector graphics, so if you’re after a more unique look, you can give your customers a visually memorable experience with custom SVGs tailored to your business.

There are reasons most logos are designed with vector editing software like Adobe Illustrator. Great logos distill a complex concept into an easily understandable visual mark. Vector graphics can send a visual message with precision – cutting the background noise and blurry interpretation that often comes with photography.

 

Conclusion

SVGs are scaleable, small in file-size, high definition, well-supported, and great for readability. They can also be customized, styled through CSS, animated, transparent, translucent or opaque, and the perfect way to standout from competition. SVGs are awesome, but not perfect. Unlike Franks Red Hot Sauce, you might not what to put that on everything. SVGs aren’t suitable in every situation. Because they’re not 100% compatible in email yet and they often have a highly illustrative style, SVGs may not be right for every brand’s website. That said, this visual format is an underutilized powerhouse that is finding its place across the internet. SVGs have won my heart. They will soon win your heart too.

Community is important in encouraging the adoption of software or tools in general. To join this community, you need to have Adobe CC or Animate CC and then go out of your way to install a plugin which may prove to be difficult or time-consuming. Limiting access to a community is a great way to prevent it from taking off. The installation process is an obstacle, as it didn’t work for me and countless others. You can get an idea of how it took me nearly 2 hours troublshooting the Snap.svg Animator plugin to work on Animate CC.

Knowing a little about my background will help you understand my experience with the plugin. I made flash games in 2008-2010, mostly with ActionScript 2.0, though I did make at least one game in ActionScript 3.0. I am familiar with flash, although I have only used the program very rarely since then.

Somewhere in 2014 I tried out the JavaScript library Snap.svg to make a puzzle. I didn’t find it too hard to get started with minimal JS experience, as the JS language has many similarities with ActionScript.  If interested in this route, I suggest checking out this Snap.svg resource to help you get started. It is tricky animating without a visual interface and that is exactly why I got excited about the promise of the Snap.svg Animator plugin that works on Animate CC (Originally Flash).

What is the ultimate goal for users of Snap.svg Animator? On one extreme, there will be designers who simply want to animate SVGs and this group can output to other formats. The rest of the spectrum includes designers who want some level of interactivity, and that will require coding.

When I first opened my first canvas, I fumbled around to create a shape and turn it into a movieclip, but my past knowledge came back, well enough for basic shortcuts. After testing the ‘movie’ using ‘ctrl + enter’ my shape displayed. When I added a little code, nothing would display. It wasn’t clear what language I should be using. Under ‘edit > preferences > code editor’ you have the option to choose ActionScript or JavaScript, the former is the default. I now believe this selection has no effect. I had to follow the one scripting Snap.svg Animator tutorial that I could find made by the plugin developer, who mentions coding is done in JavaScript. It took me a while to realize I needed to use ‘this.stop();’ instead of ‘stop();’ to stop the animation on a frame. The limited number of resources for this plugin make it hard to Google how to achieve what I set out to accomplish.

I spent two days learning basics and after a bit of frustration of not getting far, I at least saw the path to get this working. However, I completely lost the initial excitement. SVGs are fairly new, or at least having the compatibility from all major browsers is new. As with any new technology, there is a huge learning curve and best practices are being worked out. Why should I invest my time learning to use this software, when Adobe isn’t fully invested?

I am currently working on including inline SVG code and applying animations through CSS. While JavaScript will inevitably be needed for complex interactivity, CSS animations prove to be a great way to understand optimizing animation code. The Snap.svg Animator produces excessive code, even for simple tasks.

 

Obstacle Recap:

• Plugin installation troubles
• Community user-base restricted by software and plugin
• Limited documentation, FAQ, and tutorials
• Bulky file size

Animate CC and Snap.svg (the JS library) are solid tools. This review simply criticizes the integration needs work if it Adobe wants to encourage a community of enthusiastic Snap.svg Animator users. While I am not uninstalling the plugin yet, in my quest to make use of SVG on the web, I will be looking elsewhere.

TL;DR Try this:

• Restart Animate CC after making a change
• Ensure sync settings are on and not paused
• Reinstall Animate CC and snap.svg plugin
• Manually install through Manage Extentions Utility
• Restart computer

A big obstacle many face, as evident in the Snap.svg animator reviews and comment sections, is with installing the plugin. I experienced this first hand and spent two frustrating sessions getting the plugin to work. I have Adobe CC, and acquired the snap plugin on the adobe website, which didn’t give me the option to create a new “SnapSVGAnimator (Custom)” document. Several attempts to restart the program and my laptop didn’t change a thing, same with my efforts to uninstall and reinstall the plugin.

I went through Adobe’s troubleshooting, which thoroughly takes you through things such as checking your internet connection is working (step 1). Oh, it’s my internet Adobe? How did I just access this webpage?! The “more” useful suggestions have you to avoid old versions of Extension Manager CC, ensure sync settings are on and not paused, and ultimately lead me look else where for help.

Then I tried to install the plugin with the manual approach. I was very hesitant about this approach, because who wants to install unfamiliar software to install a plugin onto expensive installed software that you pay for monthly? I only pressed on because the instructions came directly from Adobe. Download and install the Manage Extensions Utility, and download the  ‘.ZXP file’ on the plugin’s GitHub page. Adobe explains how to install the .zxp file to get Snap.svg Animator working. It didn’t work. Even after restarting Animate CC and my computer. Great.

My last ditch effort was to uninstall the software and plugin, and install both again. This is the moment it started working for me. Finally. What did it? IDK. Maybe I should have uninstalled and reinstalled Animate CC in the first place, but I imagine this did not work on it’s own. I already updated the software earlier before installing the plugin, which upgraded me from Adobe Animate CC 2017 to Animate CC 2018. I was up-to-date.

Hopefully you got the plugin working, and much quicker than I did. I had to search for these various resources. If not, I suggest giving feedback on the plugin page, because a poor installation process discourages designers from giving software a try. If Adobe wants to take browser SVG animation seriously, they should get behind improving the installation process.