Concepts and definitions for SVG.
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">[...]</svg>
width
andheight
: max. available width/heightviewBox
: coordinate system as reference for width/height
<!-- Original -->
<svg width="400px" height="400px" viewBox="0 0 400 400" [...]>
<!-- Half -->
<svg width="400px" height="400px" viewBox="0 0 600 600" [...]>
<!-- Double -->
<svg width="400px" height="400px" viewBox="0 0 200 200" [...]>
See: https://thenewcode.com/744/Make-SVG-Responsive
<div class="svg-container">
<svg preserveAspectRatio="xMinYMin meet"></svg>
</div>
.svg-container {
display: inline-block;
position: relative;
width: 100%;
padding-bottom: 100%; // Override this inline for aspect ratio other than square with: 100% * height/width
vertical-align: middle;
overflow: hidden;
svg {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
}
y
is the baseline- Each letter can be placed individually like this:
x="10 15 20 25"
- Align text from top to bottom:
writing-mode="tb"
<text x="10" y="10">
Hello World!
</text>
<path id="path" d="[...]" fill="none" />
<text>
<textPath xlink:href="#path">Hello World!</textPath>
</text>
- Links are namespaced to:
xmlns:xlink="http://www.w3.org/1999/xlink"
<a xlink:href="http://">
<line [...] />
</a>
- Styles and transitions take effect on all grouped elements
<g style="stroke:green;stroke-width:5px;">
<rect [...] />
<circle [...] />
</g>
- Grouping elements like
<g>
- Available via
<use>
as cloned element
<defs>
<symbol id="symbol" >
<rect [...] />
<circle [...] />
</symbol>
</defs>
<use x="0" y="0" xlink:href="#symbol" />
<use x="10" y="10" xlink:href="#symbol" />
-
Transformation affects all parameters (also
x
andy
positions) -
Separate multiple transformations with comma
-
The order of multiple transformations is important!
-
Position:
transform="translate(10,10)"
-
Scale:
transform="scale(2)"
-
Rotate:
transform="rotate(45)"
-
Rotate with pivot point:
transform="rotate(45,100,100)"
-
Skew:
transform="skewX(30)"
andtransform="skewY(30)"
-
Multiple transformations:
transform="translate(10,10),rotate(45,100,100)"
- Animation inline or via xlink (see below)
- Animate XML attributes:
attributeType="XML"
- Prevent reset after animation:
fill="freeze"
- Prevent restart after animation:
restart="never"
<circle fill="black" [...]>
<animate attributeName="fill" attributeType="XML" begin="mouseover" from="black" to="red" dur="2s" fill="freeze" restart="never" />
</circle>
<circle id="animate" cx="100" cy="100" r="50" [...] />
<animate xlink:href="#animate" attributeName="cx" attributeType="XML" begin="click" from="100" to="200" dur="2s" fill="freeze" restart="never" />
<circle [...]>
<animateMotion path="[...]" dur="2s" fill="freeze" />
</circle>
Website: https://inkscape.org/en/
- Remove all grouped elements
- Save as » Optimized SVG (no group collapsing, do not create groups for similar attributes)