Scalable Vector Graphics, or SVGs, are the new "big thing" in web design today, and for a good reason. With the proliferation of retina screens and high resolution displays, we need to adopt techniques that allow us to serve graphics that look good on all screens in all circumstances, and because SVGs offer resolution-independent, fully scalable and crystal clear graphics, it is safe to say that they are the future graphics format of the web.
In this talk we're going to see how SVGs can be styled in CSS, and how they can be animated using CSS animations and transitions. We're also going to cover "responsifying" SVGs using CSS media queries, and how we can control the size and looks of SVGs allowing them to adapt to different screen sizes. We'll cover a short workflow from a vector graphics editor to a responsive animated graphic on screen.
18. Style Rules (Selectors)
Type Selectors:
g {/* style a group */}
circle, rect { fill: #009966; }
Class and ID Selectors:
.arrow-head { /* styles */ }
#bird { /* styles */ }
Dynamic Pseudo-Class Selectors:
.icon:hover, .icon:active, .icon:focus
{ /* styles */ }
Pseudo-Class Selectors:
:first-child, :last-child, :nth-*-
child(), :visited, :link and :lang,
:last-of-type, :first-of-type, :not(),
:nth-*-type(), :only-child, :only-of-
type, ...
Children Selectors:
g > circle {/* styles */}
Notes: Pseudo-elements/Generated Content don’t
work.
19. Style Cascades
http://goo.gl/QHFp6w
Presentation attributes count as low level “author stylesheets”
and are overridden by any other style definition (external
stylesheets, document stylesheets and inline styles).
<circle cx="100" cy="100" r="75"
fill="blue" style="fill:deepPink;" />
20. Example: Simple Hover Effect (Iconic)
Changing the stroke color and
stroke width. Fading background
in on hover.
http://goo.gl/Fofspo
31. 2. Preserve Aspect Ratio
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0
0 300 300" preserveAspectRatio="xMinYMin meet">
<style type="text/css">
/* ... */
</style>
<path class="body" d=”...”>
<!-- ... -->
</svg>
owl.svg
Note: Without viewBox, preserveAspectRatio has no effect.
http://goo.gl/b50HY8
32. 3. Embed & Wrap in a container
<!DOCTYPE html><!-- HTML5 document -->
<html> <head> ... </head>
<body>
<div class=”my-svg-container”>
<object type="image/svg+xml" data="owl.svg" class=”my-
svg”>
<!-- fallback here -->
</object>
</div>
</body>
</html>
responsive-owl.html
SVG can be embedded as <object>, <img> or inline as an <svg>. The technique will work for all three embeds.
34. 4. Position SVG Inside Container
/* pull the svg to the top of the container */
.my-svg {
position: absolute;
top: 0;
left: 0;
width: 100%; /* only required for <img /> */
}
responsive-owl.css
38. Initial transform-origin on HTML & SVG
Box Model?
transform-origin
(default value)
HTML elements (div, etc.) Yes 50% 50%*
SVG elements (circle, rect, etc.) No 0 0**
*50% 50% = center of the HTML element itself
** 0 0 is the top left corner of the SVG canvas, not the element itself
40. Setting transform-origin on SVG Elements
1. Using Percentage Values: The value is set relative to the
element’s bounding box, which includes the stroke used to
draw its border.
2. Using absolute length values: The origin is set relative to the
SVG canvas.
41. CSS Transforms on HTML vs SVG (cont’d)
<!DOCTYPE html>
<style>
div, rect {
transform-origin: 50% 50%;
}
</style>
42. Heads up: Transform-Origin Issue In
Firefox With Percentage Values
Setting transform-origin using a percentage value currently
doesn’t work in Firefox. That is a bug. (It shouldn’t be a problem
if you’re not rotating anything.)
Setting it in absolute length values should be fairly simple using a graphics editor.
44. Zooming out (or in) in Webkit/Blink
does not maintain the transform
origin at the center of the rotating
element. This is a bug.
This issue does not happen in
Firefox, where the transform origin
is set in absolute values (relative to
the SVG canvas).
Heads up: Transform-Origin Issue In
Chrome With Percentage Values
45. → Just use absolute values (for
the time being)!
46. Heads up: Hardware Acceleration In
Chrome
CSS 3D transforms are hardware accelerated in
Chrome when applied to HTML elements. However,
they are not accelerated when used on SVG elements -
they have the same performance profile as SVG
transform attributes. They are accelerated in Firefox.
48. Animated Line Drawing
To Animate an SVG path you need to know its exact length. Then:
#path {
stroke-dasharray: pathLength;
stroke-dashoffset: pathLength;
/* transition stroke-dashoffset */
transition: stroke-dashoffset 2s linear;
}
svg:hover #path{
stroke-dashoffset: 0;
}
49. Example
#cable {
stroke: #FFF2B1;
stroke-dasharray: 4000 4000;
stroke-dashoffset: 4000;
stroke-width: 4;
transition: stroke-dashoffset 8s
linear;
}
svg:hover #cable {
stroke-dashoffset: 0;
}
/* turn lamp on */
.inner-lamp{
fill:grey;
transition: fill .5s ease-in 6s;
}
svg:hover .inner-lamp {
fill: #FBFFF8;
}
/* ... */
The animated path is positioned on top of the black
path. When SVG is hovered path is animated, and the
lamp is “turned on” after path finishes animation, using a
delay that is equal to the animation (transition) time of
the path.
54. Animated Paths (Morphing Paths)
The idea is to create a SVG with one path and to morph that
path into another one.
You’ll need: the first path, the second path, and possibly
intermediate paths (depending on your animation).
There is no way in CSS to animate
one SVG path into another.
http://goo.gl/93gFYh
56. “ By using animated SVGs instead of
GIFs we were able to reduce our page
size from 1.6 mb to 389 kb, and reduce
our page load time from 8.75 s to 412
ms. That’s a huge difference.”
Animated SVGs As GIFs Replacement
http://oak.is/thinking/animated-svgs/