CSS Conf AU 2015 - "Building Better Interfaces With SVG" Talk Notes.
A while ago, I promised to publish notes from Sara Soueidan's talk "Building Better Interfaces With SVG" at CSS Conf AU in Melbourne. Here they are:
Building Better Interfaces With SVG - Sara Soueidan
- SVGs are ready for prime time - plenty of fallbacks exist
viewboxattribute = which parts of the SVG to show
- SVGs are semantic and accessible because they are full of real content
Don't try to bend the box model.
- Circular Navigation with SVG. Also see Sara's tool Curculus for creating the SVG.
- Choose best option for your site, but it's probably better to inline a smallish SVG rather than open a new HTTP connection.
- "Scribble out" checkbox effect
- Several demos of animated checkboxes and the accompanying article
- Animated line drawing in SVG
- Animated Text Fills with CSS and SVG
- Many many ways to create Textured Text
- Creative Goo Efects
- CSS3 Filter Effects Reference
- Squiggly Text with SVG Filters (works in Chrome, not FF)
- With these techniques, the fallbacks are free.
- CSS Tricks' Icon Fonts vs. SVG Cage Match
- Protip: Use
emsto size SVGs so that they scale.
- SVG Sprite Creation techniques
- Styling And Animating SVGs With CSS
- HTML5 canvas isn't really accessible without extra work
- SVG can be enhanced with ARIA
- SVG has lighting effects: A Look at SVG Light Source Filters
Here's the best news: All of the CSS CONF AU 2015 talks are now available on-line, including Sara's.