Before Going Vector
•
8 likes•1,007 views
This document provides an overview of vectors and SVG, discussing their benefits over raster images in terms of scalability, file size and expressiveness. It outlines different ways vectors and SVG can be used in browsers and with tools like Illustrator, and provides tips on optimizing and integrating SVG files. The document concludes that SVG is now the best format for drawing vectors in browsers and encourages readers to start using vectors.
Report
Share
Related slideshows
Before Going Vector
- 1. What You Should Know Before Going Vector David Deraedt | Creative Cloud Consultant, Adobe
- 2. Disclaimer I’m a fraud
- 3. Disclaimer Even worse, I’m a french fraud
- 4. But I know people JC Suzanne + Jon Da Costa
- 7. Scalability Expressiveness File Size*
- 8. Rasterizing at the right time
- 9. What do people use vectors for? 7 % 8 % 10 % 11 % 29 % 35 % ©Google ©Seb NIARK1 FERAUT
- 10. Escape From Pixel Hell
- 12. Vectors, in a Browser
- 13. More than just SVG
- 14. Vectors in the canvas (2d)
- 15. Vectors in the canvas (3d)
- 16. Vectors in the canvas (3d)
- 17. Fonts & Icon Fonts
- 18. Atelier Serge Thoraval by JC Suzanne & J DaCosta
- 19. Fonts & Icon Fonts Pros ➡ Scalable since it’s a true vectors icon set w/ transparent background ➡ Can be styled via CSS just like text ➡ Monochromatic, but stackable ➡ Relies on @font-face support: great support… but not perfect
- 20. Fonts & Icon Fonts Cons ➡ Monochromatic ➡ Mixed Rendering using the system’s font renderer & AA system ➡ Positioning can be mess ➡ Not always great for semantics and accessibility ➡ Terrible fallback results (e.g. random chars unless PUA) ➡ … and other weird browser behaviors that go with such a hack
- 22. SVG is now the best format to draw vectors in a browser
- 23. Digital Evolution by HKI
- 24. Our Agenda • What is SVG? • How to create SVG? • How to optimize SVG? • How to integrate SVG? • How to animate SVG?
- 25. SVG • XML based vector 2d image format • W3C Standard - it doesn’t belong to a privately owned company • Paths, shapes / primitives, text, bitmaps (aka raster) images • CSS styling via pres attributes, inline styles, <style> & external CSS! • Blend modes & filters (aka effects)* • Challenging interactive / animation model • Fragmentation is more than just “support”, it’s about fidelity
- 26. Ouch… Tim van de Velde http://voormedia.com/blog/2012/10/creating-svg-vector-graphics-for-maximum-browser-compatibility
- 27. A look at Apple’s App Store badge
- 28. The Right Tool For The Job
- 29. Inkpad for iPad
- 30. Ideation: Illustrator Draw for iPad
- 31. Photoshop
- 32. Photoshop CC 2014 Extract Assets & SVG support
- 33. Sketch
- 34. Illustrator feature highlight • Great diversity of drawing tools • Best of class path management tools (shape builder FTW) • True global, dynamic colors and color redefinition • Styles for elements, groups, layers, characters, paragraphs • Advanced extensibility & plugin ecosystem http://tv.adobe.com/watch/max-2013/theories-and-harmonies-of-color/!
- 36. SVG export via copy & paste
- 37. Bulk export with Layer Exporter
- 38. Expanding Complex Shapes and Appearance
- 40. The Red Wedding by Brian Yap ! https://www.behance.net/brianyap
- 42. Simpliying paths
- 44. Editing Default Filters [HOME]/Library/Application Support/Adobe/Adobe Illustrator 18/en_US/Adobe SVG Filters.svg
- 45. Pixel Perfect Precision • Use pixel units, but it won't fix anything on its own • Use Pixel Preview to check pixel precision accuracy, • Position closed shapes to integer coordinates. Same for sizes. • Apply a half pixel offset for the rest, using Graphic Styles • Use Snap to Grid, but set up the grid to snap to integers. • Do not align strokes to center • Do not use Align to Pixel Grid. • Be careful when using Ai files as Photoshop Smart Object http://www.dehats.com/blog/contents/02-illustrator-and-pixel-precision!
- 46. Optimizing SVG with SVGO-UI
- 47. Integrating SVG
- 48. SVG as… • <img> tag src attribute • inline SVG using <svg> tag • CSS background-image • <object> • <iframe> • <embed> • data URI • Canvas2d Image • WebGL texture • …
- 49. Fallbacks for <img> HTML / JS Pure HTML Pure JS Pure JS
- 50. Fallbacks for inline SVG
- 52. Responsive SVG
- 53. Responsive SVG w/ media queries (Andreas Bovens)
- 54. Issues with Responsive inline SVG (and iFrame) ! • In IE, the height is 150px even if width is explicitly specified at 100% • …Resulting in white spaces above and below the image! • Only the (ugly) Padding Hack solves this http://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/!
- 56. Spriting SVG Definitions are injected at the top! of the HTML page! Shapes are included as inline SVG! using the <use> tag and symbol def ID Shapes are gathered in a single iconset.svg file as symbols! (symbols are not displayed and can be reused)! right-arrow.svg left-arrow.svg
- 57. A word about build tools
- 58. Grunt Tasks you should know about • grunt-svgmin - optimizes SVGs using SVGO • grunt-svg2png - rasterizes SVGs to PNG using PhantomJS • grunticon - generates CSS w/ PNG fallbacks from SVGs • grunt-svgstore - Merges SVGs from a folder
- 63. Animation
- 64. CSS Transitions
- 66. Wrap-up Now’s the time to go vector SVG CC tools are ready for the job Go and make something great!
- 67. Sara Soueidan Stéphane Baril Thank you! @davidderaedt https://github.com/davidderaedt/Before-Going-Vector Michael Chaize JC Suzanne Stéphanie Walters Thibault Imbert Dmitry Baranovskiy Vincent Hardy Sylvain Gallineau Chris Coyer Rich Lee Hellohikimori Jon Da Costa Ultranoir