10/10/13 Lecture 8 SVG HTML5 INTERACTIVE WEB SITES LESSON 8 LECTURE SVG

CS 50.12 :: Fall 2013 :: Corrine Haverinen Santa Rosa Junior College

REVIEW OF .JPG AND .GIF GIF format 256 colors, lossless compression good for logos, line drawings, text, flat areas of color, but not photographs can use tranparency, but GIFs use binary transparency problematic - will have to set matte color to avoid bad edges JPG format lossy format, best for photographs not good for logos, line art, flat areas of color

REVIEW OF .PNG FORMAT lossless compression, 2 flavors - PNG 8 and PNG24 PNG 8 much like GIF with same transparency issue - uses binary transparency problematic - will have to set matte color to avoid bad edges PNG 24 makes much larger images, but worth the extra size when using transparency PNG 24 good for either photographs or flat artwork if image size is acceptable JPEG or PNG – Which Offers Better Image Quality?

PRODUCING IMAGES AND GRAPHICS FOR RESPONSIVE WEB DESIGN RWD moves us away from the fixed-width pages Need to consider different images for different size devices You may want to deliver a graphic with a different aspect ratio for smaller devices Need to take into account Retina Displays high devices and displays Fitting web pages to the viewport is about more than layout now - need to consider resolution

PIXEL DENSITY

file:///Volumes/Arbus/HTML5 Class Site Clean/Lectures/week08.html#/ 1/7 10/10/13 Lecture 8 SVG Early days - computer displays had a pixel density of 72 ppi or 96 ppi Displays gradually improved in pixel density - largely driven by mobile use mobile devices held closer to face so pixels more visible By 2008 - 150 ppi phones were the norm today's phones have 300 ppi - Retina close to pixels being invisible - limit of human eye's ability to distinguish finer details

RETINA DISPLAYS branded Retina by Apple starting with iPhone 4 iPhones, iPads, Desktop monitors, laptops double the pixel density from before 320 x 480 display for most mobile devices new iPhones are 960 x 640 - Apple made retina exactly double need to design graphics to be retina-capable

HiDPI MODE In rendering your pages, retina devices double up the pixels e.g. a 16px font takes over 32 pixels when rendered When an Apple product has retina display, each user interface widget is doubled in width and height to compensate for the smaller pixels Apple calls this mode HiDPI mode iOS devices ignore the PPI settings in images get dimensions set right Create 2 versions of images and name your images: 2x - means graphics designed for retina 1x for non-retina

BUILDING WEB SITES THAT ARE RESOLUTION INDEPENDENT Presenting page elements as fixed sizes may have issues now users may end up zooming Relative sizing - ems or percentages vs pixels used it with Fonts, now need to consider for graphics base sizing on default of 16 pixels or 1 em Study example in Resolution Independence With SVG Brush up on relative font sizes

file:///Volumes/Arbus/HTML5 Class Site Clean/Lectures/week08.html#/ 2/7 10/10/13 Lecture 8 SVG

SERVING GRAPHICS FOR VARIABLE PIXEL DENSITIES Images Avoid images - where possible make Vectoring images will not look good - so cannot avoid raster images Resolution independent options SVG CSS - automatic pixel scaling feature of the web not so elegant a solution

WHAT IS SVG? vector graphics format primarily a graphic image format, but can include text, audio, video uses XML - Extensible Markup Language designed to transport and store data whereas HTML designed to display data XML tags are not predefined, define your own tags SVG is resolution independent - great for RWD SVG files are actually text-based - so easy to use scripts to change or modify the graphics Has been around for awhile, but Flash became a bigger player Resurgence in interest and support as Flash is being de-emphasized

2 DRAWING APIS - CANVAS VS SVG Canvas renders as pixels, SVG renders as vectors SVG is a vector API that draws shapes. Each shape has an object that you can attach event handlers to. If you zoom in the shape stays smooth, whereas Canvas would become pixelated. With Canvas you have more control over the drawing and use less memory, but at the cost of having to write more code With Canvas, animations are not built in, with SVG effects such as animations are built in SVG is slower for animating Canvas better for Games

WHO IS USING SVG?

file:///Volumes/Arbus/HTML5 Class Site Clean/Lectures/week08.html#/ 3/7 10/10/13 Lecture 8 SVG Apple Wikipedia using PNG version in upper, left corner of their site, but they do have SVG version, click on it to compare 20 examples of SVG MDN Examples page about SVG on Mozilla Developers site with examples of SVG useages T­shirt example from Adobe

IMAGES TO SVG mobilefish.com can save from a .bmp, .gif, .jpg, or.png to SVG notice that their logo is a .gif hmmmm... both Wikipedia and mobilefish have SVG logos but are not using them SVG example of mobilefish logo

VECTORS TO SVG Can save out to SVG from: - free vector program for both Mac & PC Adobe Fireworks - save to SVG with a plug­in by Firetuts Photoshop workflow Use text, shape layers and layer styles Export as Paths to Illustrator

FROM ILLUSTRATOR SAVE OUT TO SVG IN 2 WAYS 1. File > Save as > SVG in HTML - call it out in img tag change size by using width and height attributes in img tag when set as a background image, set background-size property if image size is larger 2. Save as XML code - inline method yields code that you can paste into HTML document can style with CSS

BROWSER SUPPORT FOR SVG

file:///Volumes/Arbus/HTML5 Class Site Clean/Lectures/week08.html#/ 4/7 10/10/13 Lecture 8 SVG browser support is different for different uses of SVG background images, img tag, inline methond with XML code basically good in all modern browsers except IE8 and less, Android 2.3 and less fallback options conditional comment Modernizr - uses JS to detect for browser support make a png fallback image swap out source of image when SVG not supported if (!Modernizr.svg) { $(".logo img").attr("src", "images/logo.png"); }

ANOTHER FALLBACK SOLUTION Add PNG Fallbacks for SVG Files without JavaScript uses a linear-gradient in the background image property one layer is image, the other is the gradient only browsers capable of displaying the gradient will try to display the SVG also offer the png in a rule above it - this provides fallback

SERVING IMAGES FOR RETINA - GOALS Provide every user with one image optimized for their display and resolution Don't waste time, memory, bandwidth If you send high-resolution image to all devices = waste of bandwidth and memory If you send regular-resolution images = less crisp on high resolution displays

SERVING IMAGES TO RETINA DEVICES ONE IMAGE APPROACH Low density images will look the same on new screens, but not as crisp as high density images Use high density image will sacrifice performance since you will be downloading HiDPI images even on older devices with lower DPI Heavily compress a HiDPI image Use one image but do something clever with it (new stuff) new WebP image format - talked about in this article: High DPI Images for Variable Pixel Densities Clown Car Technique

file:///Volumes/Arbus/HTML5 Class Site Clean/Lectures/week08.html#/ 5/7 10/10/13 Lecture 8 SVG

SERVING IMAGES TO RETINA DEVICES MULTIPLE IMAGE APPROACH use CSS media queries in order to deliver the right graphics to the right screen based on certain criteria provide two sets of images: one for the standard display found in the older devices, and one set of images for the new Retina Display save as 1x and 2x versions (@2x for easily working with JS)

CREATING IMAGES FOR RETINA DEVICES design projects at 1x if in vector scale to 200% for 2x use percentage in Image Size dialog box opposite for raster images - start big and go small Article: 5 Things I Learned Designing For High­Resolution Retina Displays

RETINA JS - RETINAJS.COM

Open-source JavaScript makes it easy to implement Retina graphics on your site download and install looks for high-res graphics and substitutes them when accessed by someone with high-pixel- density device looks for a modifier at the end

WHAT ARE SPRITES? For sites with lots of images in them - to save load time Collection of images put together in one single image Use X and Y coordinates in CSS to show only a portion of the image in a given space Reduces the number of HTTP (server) requests

SPRITES RESOURCES

file:///Volumes/Arbus/HTML5 Class Site Clean/Lectures/week08.html#/ 6/7 10/10/13 Lecture 8 SVG Pros & Cons of using Sprites Who is using them Apple Amazon - read about in article: The Mystery Of CSS Sprites: Techniques, Tools And Tutorials Article in the beginning of use - A List Apart Testing page performance & HTTP requests YSlow ­ Firefox Add­On Can export as Sprites in Fireworks - get CSS as well as images CSS Sprites Revisited Play with Sprites - Download some Vector Icons

ICONS What is best to use for icons? Glyph icons Fonts - can easily style, sizeable SVG - can have multiple colors Icon Fonts are IcoMoon vector font generator

file:///Volumes/Arbus/HTML5 Class Site Clean/Lectures/week08.html#/ 7/7