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.
What is SVG?
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
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.
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:
- The SVG Tutorial from the Mozilla Developer Network.
- An SVG Primer for Today's Browsers, a free ebook from the W3C.
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: