CSS Two Ways

Styling SVG with CSS

elvery.net — @drzax

What is SVG?

• Vector Graphics Format
• XML-based
• For 2D graphics
• Interaction and animation
• The (relatively) new hotness

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="157px" height="157px" viewBox="0 0 157 157" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <title>A Circle</title>
    <circle stroke="#979797" fill="#D8D8D8" cx="78.5" cy="78.5" r="78.5"></circle>
</svg>

Inserting SVG

<img src="special.svg" alt=".."/>

.el {
    background: url(special.svg);
}

<object type="images/svg+xml" data="special.svg">
    <!-- fallback content -->
</object>

<embed type="images/svg+xml" src="special.svg"/>

<iframe src="special.svg">
    <!-- fallback content -->
</iframe>

<svg>
    <!-- svg markup -->
</svg>

CSS animations

CSS interactions

CSS animations

CSS interactions

CSS animations

CSS interactions

CSS animations

CSS interactions

CSS animations

CSS interactions

CSS animations

CSS interactions

Yes

Only with styles defined inside the SVG

Nope

HTML

• Box Model
• Content flows

SVG

• Absolute positioning
• Complex coordinate system

There is no Box Model

SVG is a graphics format, not a content markup language

CSS Zen Garden

and the road to enlightenment

Attributes

Using positioning attributes.

CSS

Using CSS transforms.

Positioning elements via:

<circle 
    stroke="#979797" 
    fill="#D8D8D8" 
    cx="78.5" 
    cy="78.5" 
    r="78.5">
</circle>

<circle 
    stroke="#979797" 
    fill="#D8D8D8"
    r="78.5">
</circle>

circle {
    transform: translate(78.5,78.5);
}

Presentation attributes

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg 
    width="157px" 
    height="157px" 
    viewBox="0 0 157 157" 
    version="1.1" 
    xmlns="http://www.w3.org/2000/svg">
    
    <title>A Circle</title>
    <circle 
        stroke="#979797" 
        fill="#D8D8D8" 
        cx="78.5" 
        cy="78.5" 
        r="78.5">
    </circle>
</svg>

alignment-baseline, baseline-shift, clip, clip-path, clip-rule, color, color-interpolation, color-interpolation-filters, color-profile, color-rendering, cursor, direction, display, dominant-baseline, enable-background, fill, fill-opacity, fill-rule, filter,flood-color, flood-opacity, font-family, font-size, font-size-adjust, font-stretch, font-style, font-variant, font-weight, glyph-orientation-horizontal, glyph-orientation-vertical, image-rendering, kerning, letter-spacing, lighting-color, marker-end, marker-mid, marker-start, mask, opacity, overflow, pointer-events, shape-rendering, stop-color, stop-opacity, stroke, stroke-dasharray,stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, text-anchor, text-decoration,text-rendering, unicode-bidi, visibility, word-spacing, writing-mode

alignment-baseline, baseline-shift, clip, clip-path, clip-rule, color, color-interpolation, color-interpolation-filters, color-profile, color-rendering, cursor, direction, display, dominant-baseline, enable-background, fill, fill-opacity, fill-rule, filter,flood-color, flood-opacity, font-family, font-size, font-size-adjust, font-stretch, font-style, font-variant, font-weight, glyph-orientation-horizontal, glyph-orientation-vertical, image-rendering, kerning, letter-spacing, lighting-color, marker-end, marker-mid, marker-start, mask, opacity, overflow, pointer-events, shape-rendering, stop-color, stop-opacity, stroke, stroke-dasharray,stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, text-anchor, text-decoration, text-rendering, unicode-bidi, visibility, word-spacing, writing-mode

SVG

fill
stroke
stroke-dasharray
stroke-opacity
stroke-width 
text-anchor

HTML

color/background-color
border-color
border-style
border-color (RGBA)
border-width 
text-align

<text>

• <text> ain't text
• Some attributes are shared, but they might not do what you think

Something I've been working on...