shutterstock_184473665.jpg

Summit 7 Team Blogs

Vector v. Raster #672,000,001

The varying pixel densities, resolutions and screen sizes of mobile and tablet devices wreak havoc on our 72dpi masterpieces. I want to share a neat trick for ensuring crisp, beautiful, pixel perfect display across devices. The trick is SVG.

Although SVG has been with us for some time, bizarrely enough only with the release of Honeycomb has Android cottoned onto this graphical godsend. Luckily, we don’t have to wait several years for Android 2.x to fade from prominence. Thanks to basic feature detection, we can use SVG right now and have our vectors look great on any device.

Scalable Vector Graphics files are small (when used for their intended purpose) and can be embedded directly within HTML (or CSS) to minimize the number of requests sent to the server – an important consideration when delivering rich content over 3G. What they lack in disk size they make up for with infinite scalability. Pinch zoom on a regular JPEG or PNG logo and the rigidity of raster is immediately apparent. Not so with SVGs, which will gladly zoom and zoom and zoom until the device can zoom no more.

While Modernizr purports to help out, some devices fall through the cracks. So, for older Androids, and newer Windows phones for that matter, we can provide a PNG fallback pretty easily. We simply add a test for SVG compatibility within the SVG tag:

 

<switch>

&lt;!—Test for SVG compatibility of browser --&gt;
&lt;g requiredFeatures="http://www.w3.org/TR/SVG11/feature#SVG"&gt;
&lt;!—If available do nothing else. Otherwise… --&gt;&lt;/g&gt;
&lt;foreignObject&gt;
&lt;!-- …show this fallback HTML --&gt;
&lt;img src="PNG or JPEG substitute " alt="JCTC" /&gt;
&lt;/foreignObject&gt;
&lt;/switch&gt;

Combined with media queries we can even supply several variants of our PNG/JPEG to load dynamically based on screen size. Hopefully the fallback isn’t needed (and if it isn’t the alternative images are not requested) but when it is, the user experience is barely altered unless you’re one of those people who experiences physical pain at the sight of moderate pixilation at 400% zoom… One of those people.

 

Disclaimer
The sample scripts are not supported under any Summit 7 Systems standard support program or service. The sample scripts are provided AS IS without warranty of any kind. Summit 7 Systems further disclaims all implied warranties including, without limitation, any implied warranties of merchantability or of fitness for a particular purpose. The entire risk arising out of the use or performance of the sample scripts and documentation remains with you. In no event shall Summit 7 Systems, its authors, or anyone else involved in the creation, production, or delivery of the scripts be liable for any damages whatsoever (including, without limitation, damages for loss of business profits, business interruption, loss of business information, or other pecuniary loss) arising out of the use of or inability to use the sample scripts or documentation, even if Summit 7 Systems has been advised of the possibility of such damages.

SHARE THIS STORY | |
About Andrew Boulton