DISCOVER

Every movement begins with a moment.

Top 10 Reasons Why SVG Is the New Flash

Posted 11 March 2015 5:00 PM by Andy Makely

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.

7. Interactivity – SVG is not just a still image format. You can create clickable elements within your SVG design that can execute JavaScript code just like you would in HTML. You can add rollovers, draggable elements and more.

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.

3. Code – Flash had a strong community of developers who released many wonderful open-source tools. SVG has a growing following, with some great JavaScript code libraries such as SnapSVG (managed by Adobe) and Raphael. SVG also works well with familiar favorites like the Greensock TweenMax and TimelineMax libraries and the impressive charting library, D3JS.

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.

SVG Examples:

Moxie 2015 Trends Report: http://www.moxieusa.com/trends

Polygon XBOX One review: http://www.polygon.com/a/xbox-one-review

Codrops: http://tympanus.net/codrops/tag/svg

SVG Resources:

SnapSVG: JavaScript code library for building interactive SVG - http://snapsvg.io

RaphaelJS: JavaScript code library for building interactive SVG - http://raphaeljs.com

D3: JavaScript code library for robust data charting/graphing -  http://d3js.org

Greensock: JavaScript code library for animation - http://greensock.com

Inkscape: Open-source tool for creating SVG artwork - https://inkscape.org

Share:

Add your comment

 
 

 

Archive

Syndication

Tagcloud

#crisis #socialmediacrisis #socialmedia #digitalmarketing #socialmarketing #strategy #influencers #communication #pr #media #ideation #creation #content #planning #culture Snapchat Snap Inc. advertising marketing social media community management brand millennials authenticity Spectacles Wearables customer customer service Paid Media Podcasts Content Sponsored Ads Content Marketing #content #marketing #media #analytics #digitalmarketing #ideation #creation #production DecisionIQ strategy big data personalization Humanizeit Facebook Facebook Live Video Media Media Planning Data Intern Instagram Stories ftc guidelines social influencer social influencers social media influencers social media broadcasting live video Processing prototype prototyping user experience ux technology programming coding java ideas design visual arts mix reality mixed realities tutorial sketch Twitter Carousel Ads Ad Exchange Programmatic FBX Disney virtual reality projection mapping RFID Tumblr Voice Tone Axure wireframing UX software collaboration Measuring Usability UX Best Practices Designing User Journeys Stop counting clicks Designing for completion Designing for satisfaction Dieter Ram and User Experience Less is more Less but better Influencer Marketing learnability user interface user-created content gaming maker editor Super Mario Maker Nintendo digital media chat bots messaging mobile applications automation F8 Mark Zuckerberg Business F8 Conference Email office agency communication Slack Facebook at Work meetings productivity Wearable tech Healthcare Experience Patient Experience Service Design Strategy Creative Moxie VR Six Flags Six Flags Over Georgia theme parks Samsung Samsung Gear Samsung Galaxy VR headset Oculus Rift Playstation VR roller coasters Dare Devil Drive Websites Web dev development digital reactions emotion analytics dislike social metrics clicks Brands Consumers CPG Retail Consumer Marketing Consumer Insights Super Bowl Commercials Football Cultural Phenomenon Game adtech martec auto-responders automated marketing Experience Design Interaction Design Ecosystem iOS Healthkit Ad blocking Forbes Condé Nast GQ interactive media ad-light hashtags hashflags audience visual emojis campaign management 1-to-1 marketing omnichannel CES CES 2016 Oculus Sony PlayStation uSens HTC special mapping hand tracking games PetBot WonderWoof BowTie Pets OTT digital distribution Netflix Reed Hastings on-demand #yearahead #2016 #newyear #2016predictions #digitalstrategy #modernism user-generated content UGC Consumer Connection Integrated Marketing Manufacturers Accessibility usability engagement rate disability awareness creative process creativity fail fast hiring ideas imperfectionist perfectionist personnel progress test and learn fast casual restaurants social media campaigns QSR social strategies in-store promotions in-store social media promotions successful social media campaigns Logos Typography Branding #CPG #Retail #ConsumerInsights #CRM #ConsumerDirect #Seamless #OmniChannel #MoxieMakers #frontierism #intelligence #architecture insight moments Unit3C FutureX lab innovation open house Q&A UnitFilms 48in48 General Assembly Non-Profit Ponce City Market Branded design technical design style guide wireframes brand guidelines Consumer Products Interactive Marketing GIF social campaign modern marketing Cannes Lions new media pop culture meme Web Accessibility QA media buying mobile apps targeting wires Advertisers Apple Store EasyPay self-checkout app mobile payment Sporting Events Sitecore CMS delivery Content Marketing Strategy Brand Content Marketing Content Strategy Brand Content Strategy Social Content Strategy Cannes humanity what3words life saving dot Agency Partnership Agency Relationship Competitive Review Millennial Marketers email marketing omni-channel digital marketing esp email service provider process WCAG 2016 Planning Connected Omni AR Commerce Social Innovation Create Content Strategy OMMA MediaPost Internet Week TV & Video Media Planners Creative Conundrum real-time scalability Customization smartphone loyalty advocacy live streaming content democracy Open Source Node.js Cheerio Handlebars Hyperquext MongoDB Atlassian Stash PhantomJS Shopping On-demand economy Sharing economy Everything on demand Instant delivery iPhone App Amazon Now Build Automation DevOps Native Advertising Machina Forrester SXSW Machine Learning Data Streams Web search results Data Platforms ROI Instagram Purchase Behavior Like Content Consumer Channel Role and Purpose ExactTarget Salesforce Cloud Responsys Oracle Silverpop IBM Agency Culture Innovation and Technology Client Relationships Platform Partnerships Ever-evolving Digital Age geo-fencing tablet Android second-screen Austin FOMO Meerkat scaleable vector graphics Flash animation interactivity code browsers uber-savvy consumers integrated digital-connectedness Valentine's Über Bloom that Open Table Waze marketing research google music art sports illustration sculpture food green entertainment movies photography real time marketing cheat sheet smart homes vine print 3d printing street art painting fashion influencer movie billboard outdoor mobile wallet toys film halloween history space films cars anniversary
×

PLEASE PROVIDE YOUR INFORMATION
TO DOWNLOAD THE PAPER.

Error: All fields are required.
×
THANK YOU.
YOUR DOWNLOAD IS NOW AVAILABLE.