SVG Meets CSS Meets Rails

No clear process to manage image assets in a Ruby on Rails projects? You heard about the benefits of using SVGs but never got the hang of it?

This presentation proposes and explains a workflow to start using SVG images efficiently in web applications. The techniques and workflows can also be applied to non-Ruby based applications.

Presented at Bangkok Ruby Tuesday #7

Transcript

1. SVG Meets CSS Meets Rails Olivier Robert, Nimbl3 Bangkok Ruby Tuesday #7 August 28th, 2018
2. Questions • How do you manage UI images for your application? • SVG? PNG? JPEG? BITMAP? TIFF? RAW? • How do you name images? • How do you organize images? • Do you even care?
3. How to use SVG sprite images in Rails apps in 3 steps
4. @olivierobert
7. 1. Preparing SVG images
8. Designers give this to developers The rendered image looks neat
9. But if you look under the hood... tons of generated and unnecessary code. No thank you!
10. SVG make-over: manually or using SVGO No more garbage code, only what is needed
11. Feels better already. But it can even be even better.
12. Prepare SVG Images Enforce consistent naming
13. Prepare SVG Images Enforce fixed width / height for all icons ⇒ 32px is a good default • 2x default font size (16px) ⇒ Can be anything e.g. 16px, 48px
14. Prepare SVG Images Enforce default color for all images Black is a good default ⇒ It does not matter which color as it will be replaced
15. Prepare SVG Images SVG styling with ease using CSS currentColor value
16. Prepare SVG Images https://codepen.io/olivierobert/pen/bjyBeK
17. 2. Generating an SVG sprite Image
18. Generating an SVG sprite Image: Ruby gem Using the gem `svgeez` ⇒ https://github.com/jgarber623/svgeez
19. Generating an SVG sprite Image: JS Package Using SVGSpritemapPlugin via Webpack ⇒ Requires Webpacker in the Rails application
20. 3. Using an SVG sprite image
21. Using the SVG sprite image: Sprite Setup • Insert the sprite image a the stop of the body ⇒ Needs to be defined first • Use HTML attribute “hidden” to hide it
22. Using the SVG sprite image: : Sprite Setup Using the gem `svgeez` (-> inline_svg)
23. Using the SVG sprite image: Inside Views • icon_id matches the svg image filename and symbol ID in the sprite image • Add all other attributes to the SVG image
24. Using the SVG sprite image: Inside Views
25. Using the SVG sprite image: Inside Views Using a ruby helper
26. Using the SVG sprite image: Inside Views Using a Jekyll helper
27. The same technique can be used in any environment
28. One thing to remember Inline SVG
29. Things to know • Inline SVG allow access to any part of the SVG as CSS selectors: ⇒ Great for animation • Sprite image can be used as background image in CSS too • Older version of IE still requires a polyfill: SVG4everybody ⇒ There is a Webpack plugin
30. Thanks! Contact Nimbl3 hello@nimbl3.com 399 Sukhumvit Road, Interchange 21 Klongtoey nua, Wattana Bangkok 10110 28C Stanley St, Singapore 068737 20th Floor, Central Tower 28 Queen's Road Central, Hong Kong nimbl3.com
31. We are hiring! • Ruby devs • Android devs • Product Managers