elvery.net — @drzax
<?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>
<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
SVG is a graphics format, not a content markup language
and the road to enlightenment
Using positioning attributes.
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);
}
<?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
fill stroke stroke-dasharray stroke-opacity stroke-width text-anchor
color/background-color border-color border-style border-color (RGBA) border-width text-align
<text>