Creating SVG vector graphics for maximum browser compatibility

Creating SVG vector graphics for maximum browser compatibility

This article describes how to design vector graphics and maximize SVG features while retaining browser compatibility. SVG stands for Scalable Vector Graphics. It is a resolution independent format for graphics on the web.We use a lot of icons and logos on voormedia.com. Every portfolio and service page has at least one. Every icon is created as vector graphic as part of our quest to create a completely resolution independent website. It turned out that not every company or software library has a vector icon available, so we decided to recreate them ourselves using Adobe Illustrator CS6.One of the icons I created was the new icon from Final Cut

What the influencers are saying

  1. Jeff Atwood

    238.0 days ago

    Spoiler: apparently when it comes to advanced SVG, Opera and IE lead the pack. Go figure. http://t.co/MxX5tLtT

  2. Thomas Fuchs

    238.0 days ago

    SVG cross-browser do’s and don’ts http://t.co/jCzDQmmF /via @443dev

  3. Nathan Smith

    238.0 days ago

    Interesting that IE9 and Opera render SVG better than Chrome… http://t.co/JbEXtStZ /via @mheard



Related Reading




InformationWeek encourages readers to engage in spirited, healthy debate, including taking us to task. However, InformationWeek moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing/SPAM. InformationWeek further reserves the right to disable the profile of any commenter participating in said activities.

Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.