# SVG

Pictures drawn in shapes rather than pixels: badges, logos, icons, diagrams. They stay sharp at any zoom.

## Badges

The ones at the top of every README. They are text, laid out to an exact width (`textLength`), with a shadow, a gradient gloss and sometimes a logo — itself an SVG inside the SVG.

![build passing](images/svg/badge-flat.svg) ![license MIT](images/svg/badge-flat-square.svg) ![swift 6.2](images/svg/badge-plastic.svg) ![Swift](images/svg/badge-logo.svg) ![stars 164](images/svg/badge-social.svg)

![platform iOS | macOS](images/svg/badge-for-the-badge.svg)

GitHub's own, with its logo and a gradient:

![Pull request](images/svg/badge-actions.svg)

## Icons

Simple Icons' Swift, GitHub and Markdown logos: one path each, drawn here three times their size.

![Swift, GitHub and Markdown icons](images/svg/icons.svg)

## Shapes and paths

Rectangles with rounded corners, circles, ellipses, polygons, dashes, and a path of curves and arcs.

![shapes](images/svg/shapes.svg)

## Gradients

Linear and radial, with a focus off-centre; reflected stripes and repeated rings (`spreadMethod`).

![gradients](images/svg/gradients.svg)

## Text

Anchored at its start, middle or end; filled with a gradient and outlined; stretched to a length, with spans of their own style.

![text](images/svg/text.svg)

## Text on a path, and vertical

Letters that follow a curve, each turned with it; and text written top to bottom: Japanese upright, Latin letters on their side, or standing up when asked.

![Text on a curve and vertical text](images/svg/text-more.svg)

## Clipping

A landscape seen through two round windows, a sun through a star.

![clipping](images/svg/clipping.svg)

## Patterns

Tiles repeated over a shape: hatching turned 45°, dots, and a checkerboard laid over the square's own size.

![Hatching, dots and checks](images/svg/patterns.svg)

## Masks

A picture faded out by a gradient, and a word cut out of a sky.

![A faded picture and a word cut out](images/svg/masks.svg)

## Markers

Arrowheads and dots placed at the ends and corners of lines, turned along them.

![A three-step diagram with arrows](images/svg/markers.svg)

## Filters

A drop shadow, a blur, a glow made of a blurred outline and a flood of colour, and a rainbow turned sepia by a colour matrix.

![Shadow, blur, glow and sepia](images/svg/filters.svg)

More effects: clouds of noise kept inside a shape, a light shining on a blurred relief, and an outline grown around letters.

![Clouds, a shiny relief and an outline](images/svg/effects.svg)

## Animation

Pictures that move: a spinner and a pulse made with CSS keyframes, a ball following a curve and a bar easing in and out with SMIL. They only move while they're on screen.

![A spinner, a pulse, a bouncing ball](images/svg/animation.svg)

## Style sheets

Colours set by a `<style>` sheet: by class, by position (`:first-child`, the one after `.on`), by attribute (`[data-alarm]`), or right on the element. A `:hover` rule never applies: nothing is under a mouse here.

![CSS](images/svg/css.svg)

## Light and dark

The same picture, in the colours of the page's appearance: switch your device to dark mode.

![Light or dark](images/svg/scheme.svg)

## Reuse

One leaf, defined once as a `symbol`, drawn four times with `use`: sized, coloured, turned and slanted each its own way.

![leaves](images/svg/reuse.svg)

## Big pictures

The SVG logo, and Ghostscript's tiger: 240 paths, 68 KB.

![SVG logo](images/svg/logo-svg.svg)

![Ghostscript tiger](images/svg/tiger.svg)

See also: [Maths](maths.md) · [Pocket heat](pocket-heat.md) · [Dowwwn](/homepage.md)