1. Home
  2. Resources
  3. Svg Swf

SVG vs SWF

Web designers and developers who want to create vector-based graphics and animations have two options to choose between: SVG and SWF. Experienced professionals know SWF well – the format of Flash animations and graphics – and while SVGs have been around for quite a while, it’s only in the last few years that support for SVGs has gone mainstream.

With support for Flash dwindling in favor of HTML5, CSS, JavaScript, and SVG, it’s critical that web professionals understand the differences between SVG and SWF and learn to use modern technologies.

What is SVG?

Smooth Vector Graphics (SVG) is a file format for two-dimensional vector graphics that supports interactivity and animation. SVGs can be transformed with CSS and animated with JavaScript. All modern browsers offer some degree of support for SVGs, and additional features are being integrated into modern web browsers on an ongoing basis.

By using CSS and JavaScript to animate SVGs, you can create some amazing things.

What is SWF?

SWF is an acronym that stands for Small Web Format. It’s an Adobe Flash file format that can be used for graphics, animations, and embedded applet widgets. The Flash plugin must be installed in a browser in order for SWF content to render.

SWF has been around for a long time, is supported by a large pool of qualified developers, and there are many pre-built SWF animations and tutorials readily available.

Similarities and Differences Between SVG and SWF

SWF and SVG are both vector graphic file formats, and they both can be scripted to create animations and interactivity. In this way they are similar. However, there are many ways in which SWF and SVG are different.

SVG is an Open Standard

The SVG standard was developed by the World Wide Web Consortium (W3C) and, as a result, is completely open and free to use and build upon. SWF, on the other hand, is a proprietary Flash format owned by Adobe. In 2008, Adobe removed many of the restrictions governing the use of SWFs, but SWF remains a proprietary format.

SVGs are Easier to Work With

SVG code is human-readable plain text XML. SVGs can be created using any plain text editor and creating simple SVGs is easy to do and can be learned quickly by anyone familiar with web languages like HTML, CSS, and JavaScript. SWFs must be created and edited with complex programs such as Adobe After Effects or open-source alternatives such as Motion-Twin ActionScript 2 Compiler.

In addition, scripting SVGs for animation and interactivity can be done with CSS and JavaScript – languages every web designer and developer works with on a daily basis. SWFs, on the other hand, are scripted with Adobe’s ActionScript which is similar to JavaScript but not identical, and most developers deal with it on a much less frequent basis.

Adding an SVG to a website is also as simple as dropping the code into an HTML document in line with other HTML elements. Alternatively, SVGs can be embedded into an HTML document. SWFs must be embedded into an HTML document.

SVGs are Better for SEO

Since SVGs are written in plain-text they can be read and indexed by search engines. SWFs, on the other hand, are binary files that are difficult for search engines to interpret. As a result, if you are using an SVG or SWF to deliver content, you’re better served to use SVGs if search engine traffic is important to your website.

SVG Support is Growing

While support SWF files is available in most desktop web browsers, the same is not true of mobile browsers. Support for Flash content, including SWF files, has been largely phased out of mobile browsers. Support for SVGs, on the other hand, is offered by every modern browser and support for new features is being added on an ongoing basis.

Both SVG and SWF Support Multiple Media Types

Sound and video content can be embedded directly into an SWF file. SVG does not include support for sound and video content. However, other HTML5 features do support audio and video content, and these features can be embedded directly into SVG. As a result, audio and video can be embedded in an SVG, but playback is handled by other players, not by the SVG standard itself.

Resources

There are many free articles, tutorials, and guides to help you get started with SVGs. Here are some of the best.

Learn the Basics

If you’re just getting started with SVGs, check out this tutorial from Creative Bloq for creating simple shapes and using fills and gradients. A second option that covers a lot of the same basic techniques is this guide to getting started with SVGs from Envato Tuts+.

Use Graphics Software to Create SVGs

If you’re going to create anything more complex than simple shapes you will want to work with a vector graphics program such as Adobe Illustrator which can export files in SVG format. This quickguide from CSS-Tricks will show you how to use Illustrator to create an animated ad that uses just HTML and CSS. Another great resource for learning how to use Illustrator to create SVGs comes from the Web Designer Depot.

If you don’t have access to Adobe Illustrator, you aren’t out of luck. Inkscape is a professional-quality vector graphics program that is free and open-source. There are also many great tutorials available from Inkscape that will help you get started with the program and show you how to export your creations in SVG format.

Learn Advanced SVG Techniques

If you want to really master SVGs there are two resources you need to spend some time reviewing:

Both of these resources are extensive and cover the full breadth of current thinking and practice with regard to SVG programming. These resources are not for beginners, but if you’re comfortable with HTML and CSS, and want to become proficient at working with SVGs, then you’re ready to take these on.

Create SVG Animations

SVGs can be used to create truly impressive animations. Once you are comfortable working with SVGs, if you want to learn how to create impressive SVG animations check out these resources:

Summary

While Flash-based graphics ruled the web in the past, the future belongs to SVGs animated with CSS and JavaScript. These resources will help web designers and webmasters keep their skills up to date and begin to use SVGs in their projects.

↑