Every movement begins with a moment.
In April 2010, Steve Jobs published his proclamation on why Apple devices would not run Adobe Flash. And so began the downward spiral of Flash, an application that once ruled the Web is now being quietly ushered off and invited to retire in a quiet digital corner.
Some people get great pleasure from criticizing Flash, citing a history of security, accessibility and performance issues. Say what you want, but you can’t deny that Flash has lived a long and productive life, especially when it comes to delivering engaging interactive content on the Web. Animations were easy to create in Flash. It worked across all browsers, could be delivered over a small bandwidth (when built properly) and — the biggest testament to its efficacy — it was supported by a robust community of developers who shared code libraries to help each other build great things.
The problem is that, in 2010, the number of mobile devices accessing the Web was exploding, and Flash was not invited to the party.
So now what? Your clients are still telling you that they want that jaw-dropping animation and interactivity, but that it has to work on mobile. No problem. We’ve got you covered: It’s time to chat about SVG.
What is SVG?
SVG stands for Scalable Vector Graphics, which was created as a standard by the World Wide Web Consortium (W3C) in 1999. Basically, SVG is a way to define how a graphic looks using code, similar to the way HTML defines how a Web page looks. And when it comes to building engaging interactive experiences online, SVG has many of the same features that made Flash so popular. It’s lightweight, animated, interactive, powerful and — ding, ding, ding! — mobile-friendly.
Client: This SVG stuff sounds great, but will it work on my phone and tablet?
You: Yes! (optional high five)
I love saying yes to that question. And you will, too, which is why I now present to you:
The Top 10 Reasons Why SVG Is the New Flash:
10. Scalability – You can display SVG graphics in a browser, scale them larger or smaller, and they still look good. If you make a JPEG larger, it gets fuzzy and unusable. You can create a logo using SVG and comfortably display it on your website in a variety of places at various sizes without rework.
9. Vectors – Because the images are defined using shapes and paths instead of pixels, SVG images can be significantly smaller and quicker to load than JPEG, PNG or GIF images. This makes your users happy because the pages load faster over slower connections. A 400x300 raster (pixel) image contains 120,000 pixels, and all of that information has to be stored in the file. A 400x300 SVG image contains the simple instruction to create a drawing containing a box that is proportioned to be 400x300. If you scale that drawing up to 800x600, it’s no big deal.
The box will be drawn twice as large. The SVG file is the same size as before – you can actually use the same SVG file for multiple sizes.
8. Graphics – SVG images can contain lines, shapes, text (with custom Web fonts!), color gradients, transparency, filters (blurry shadows, warps, color tints), masks and more. You can even include pixel-based images and photos in your SVG design, as long as you do this judiciously. Images need to be included at their largest rendered size because the pixels will still suffer the blurry effects of scaling to a larger size. And images will consume your precious bandwidth.
6. Animation – You can build a wide variety of animations for your design in SVG. This includes all the typical transitions (e.g., move, scale and fade) plus extras, like animated clipping paths, which allow you to animate a shape that is being used to crop a photo or other art. You can also animate the transformation of shapes into other shapes, from circles into squares to one letter morphing into another.
5. It’s searchable – Here’s one place where SVG has a big advantage over Flash. Flash hid everything within a binary SWF file where search engines could not look. SVG is rendered in the page as markup code, just like HTML, which means that all of the text you include in your design is visible to search engines.
4. Hierarchy – Flash developers often worked with display components called MovieClips. If you wanted animation within animation, like a flag waving on a rocking boat, you put the animated flag MovieClip inside the animated boat MovieClip. SVG also works this way, so planning your SVG project is very similar to how you would plan a Flash project because you can nest animations within each other in the same way.
2. Browsers – If you consult CanIUse.com (a great resource for browser capabilities), you will see that Inline SVG in HTML5 is supported by all major desktop browsers, including Internet Explorer 9 through 11, and multiple recent versions of Chrome, Safari, Firefox and even Opera.
1. Mobile! – Yes, SVG works on your phone. Let me say that again. SVG WORKS ON YOUR PHONE. And your manager’s phone. And your client’s phone. And your client’s customers’ phones.
This brings us full circle, and Mr. Jobs can rest a little easier. You can now have most of the great things that were available with Flash (we’re still waiting on camera access) available to you and your users on mobile devices courtesy of SVG.
Do you still use Flash? Have you done any work with SVG? Let us know what you think in the comments below.
Moxie 2015 Trends Report: http://www.moxieusa.com/trends
Polygon XBOX One review: http://www.polygon.com/a/xbox-one-review
Inkscape: Open-source tool for creating SVG artwork - https://inkscape.org
PLEASE PROVIDE YOUR INFORMATIONTO DOWNLOAD THE PAPER.