Introducing
Your new presentation assistant.
Refine, enhance, and tailor your content, source relevant images, and edit visuals quicker than ever before.
Trending searches
Putting the 'S' into SVG
1
'SAVE AS' SVG
Thanks!
Alex Walker
@alexmwalker
sitepoint.com
learnable.com
SVG OPTIMIZERS
http://petercollingridge.appspot.com/svg-editor
- Moves inline SVG properties to CSS
- Trim useless decimal places (1 is plenty)
- Eliminates empty groups
Demos
Two Kinds of SVG
Benefits
(..as if I need to tell you guys the benefits of CSS)
1) The 'save as' SVG we get from Graphics Applications
1) File size
2) The more powerful, truly 'Web-Ready' SVG we hand code
2) Managability
Tools &
Helpers
3) MEDIA Queries!
No Pre-processors
Upload Support
Responsive SVG
Say goodbye to Sass, Less, Stylus, etc ...
Say hello to CSS prefixes again
(scalable)
^
Wordpress, Flickr, IMGUR, etc
I've been using GITHUB to host
Or Putting the 's' into 'SVG'
Alex Walker
@alexmwalker
sitepoint.com
learnable.com
Style blocks in SVG
Issues & Gotchas
<svg>
<style>
.rectangles {
fill: red; stroke: white; stroke-width: 4px;
}
</style>
<rect x="10" y="10"
height="50" width="50"
class="rectangles"
/>
</svg>
Use Code Playgrounds
- Codepen.io
- CSSDeck.com
- Dabblet.com
USING CSS in SVG
.. all render SVG as you write/paste it
<svg>
<rect x="10" y="10"
height="50" width="50"
fill="red" stroke="white"
stroke-width="4px"
/>
</svg>
Problems
It's full of..... stuff! (like Word HTML)
It ignores the coolest features of SVG
PATTERNs
SYMBOLs
CSS