Fontes

Liens

Images

Mise en valeur des formes (Styling shapes)

Un grand nombre d'attribut de mise en valeur définis ci-dessus peuvent être définis en CSS.

        <circle class="face" cx="128" cy="128" r="120" />

        .face {
          fill: yellow;
          stroke: #000;
          stroke-width: 6px;
          stroke-dasharray: 4,4;
        }

Mise en valeur du texte

Un grand nombre d'attribut de mise en valeur de texte définis ci-dessus peuvent être définis en CSS.

        <text class="dinos">Dinosaurs!</text>

        .dinos {
          font-family: Georgia, serif;
          font-style: italic;
          font-size: 1.5rem;
        }

Styling effects

Many of the effect related attributes can also be styled in CSS.

<rect class="box" x="0" y="0" width="256" height="64" />

.box { fill: limegreen; transform: rotate(45deg); transition: all .25s linear; }

.box:hover { fill: orange; }

Effects

Hover

Using CSS we can add hover effects to any SVG element.

Only works if the SVG is embedded in the HTML.

<rect class="box" x="0" y="0" width="256" height="64" />

.box { fill: green; }

.box:hover { fill: limegreen; }

Transformations

The transform property in CSS actually started in SVG, so it’s an attribute or CSS.

<rect transform="rotate(45)" x="0" y="0" width="256" height="64" />

Or in CSS:

rect { transform: rotate(90deg); }

Transform origin

In SVG, the transform origin for rotation is set in the rotate() value.

<rect transform="rotate(45, 10, 10)" x="0" y="0" width="256" height="64" />

In CSS, we can use transform-origin—but we cannot use the keywords like center, it has to be set in pixels.

rect { transform: rotate(90deg); /* These pixels are within the SVGs viewport pixel measurements */ transform-origin: 10px 10px; }

Transitions

Using CSS we can add transitions to any SVG element.

Only works if the SVG is embedded in the HTML.

<rect class="box" x="0" y="0" width="256" height="64" />

.box { fill: green; transition: all .25s linear; }

.box:hover { fill: limegreen; }

Animations

Using CSS we can add animations to any SVG element.

Only works if the SVG is embedded in the HTML.

<rect class="box" x="0" y="0" width="256" height="64" />

.box { animation: spin 2s linear; }

@keyframes spin {

0% { transform: rotate(0); }

100% { transform: rotate(360deg); }

}

Masking

Making parts of graphics and text semi-transparent with masks.

<defs> <mask id="mask"> <image width="500" height="200" xlink:href="images/text-mask.png" /> </mask> </defs>

<rect mask="url(#mask)" x="0" y="0" width="256" height="64" /> <text mask="url(#mask)">Splatter!</text>

The <mask> element inside of the definitions can be used along with the mask="" attribute.

Mask should be black and white images: the black becoming transparent & the white showing.

Texturing & patterns

Filling inside graphics and text with a repeating texture or pattern.

<defs> <pattern width="500" patternUnits="userSpaceOnUse" height="200" id="texture"> <image xlink:href="images/mars.jpg" width="800" height="500" /> </pattern> </defs>

<rect fill="url(#texture)" x="0" y="0" width="256" height="64" /> <text fill="url(#texture)">Mars</text>

The <pattern> element inside of the definitions can be used along with the fill="" attribute.

Filters

Filters allow graphic effects to be applied to elements and text.

<defs> <filter id="blur-me"> <feGaussianBlur in="SourceGraphic" stdDeviation="5" /> </filter> </defs>

<rect filter="url(#blur-me)" x="0" y="0" width="256" height="64" /> <text filter="url(#blur-me)">Mars</text>

SVG icons

Spritebot

Drop a bunch of exported icons from Illustrator into Spritebot and save.

Put the saved sprite sheet into your images folder.

The original, exported SVGs can be trashed.

Using icons

Use the <svg> tag and the <use> tag to grab an icon from within the sprite sheet.

The id of the icon is the same as it’s filename when dropped into Spritebot.

<svg><use xlink:href="images/icons.svg#stego"></use></svg>

It’s usually a good thing to insert it into an element for CSS control.

<i class="icon i-32"> <svg><use xlink:href="images/icons.svg#stego"></use></svg> </i>

Seeing icons

SVG icons won’t load in Chrome, Firefox or Opera if you double click the HTML file.

They will still absolutely work in those browsers when your website is online.

This is a security feature of the browsers.

They will load properly in Safari.

To get proper loading on the local version you need a web server—drop your folder into Markbot and press ⌘B

Accessibility

Titles & descriptions

<title>Dinosaurs are among us!</title>

Use the <title> tag to add alternative text to an SVG—think of it like the <img alt="">

<desc>Dinosaurs are living among us now—or at least their descendants—in the form of birds.</desc>

The <desc> tag is for more complex descriptions and information.

If the SVG was a pie-chart, for example, <desc> would hold all the percentages and stuff.

ARIA descriptions

<svg aria-details="#dino-info"></svg>

<div id="dino-info"> <h2>Dinosaurs are among us!</h2> <p>Dinosaurs are living among us now—or at least their descendants—in the form of birds.</p> </div>

The aria-details attribute is a great way to use HTML to complement an SVG—especially if the content is really detailed.

Hiding SVGs

        <svg aria-hidden="true">
          <text>Juste pour la décoration!</text>
        </svg>

The aria-hidden="true" attribute can be used to completely hide the graphic and its text from accessibility tools. L'attribut aria-hidden="true" permet de ne pas polluer la lecture d'une page par un lecteur spécifique pour une personne handicapé, avec des informations accessoires. ARIA signifie "Application Internet Enrichie pour Handicapés ("Accessible Rich Internet Applications").

Donc si on veut être attentifs aux personnes qui naviguent sans voir les images mais seulement avec un générateur vocal, on soustrait les commandes graphiques de la lecture. C'est important!