circle <circle cx="20" cy="20" r="15" stroke="black" stroke-width="1" fill="blue"/>
ellipse <ellipse cx="30" cy="20" rx="25" ry="17" stroke="blue" stroke-width="2" fill="red"/>
line <line x1="5" y1="5" x2="55" y2="37" stroke="green" />
path <path d="M5 5 C5 5 10 35 55 30 L30 5" style="stroke: black;fill:white" />
polygon <polygon points="5,5 15,35 55,35 45,5" style="stroke:black; fill:rgb(200,200,200)" />
polyline <polyline points="30,5 25,8 20,12 15,20 20,28 25,32 30,35" style="fill:blue;stroke:black; opacity:.5" />
rect <rect x="5" y="5" width="50" height="30" stroke="red" stroke-width="1" />
text <text x="5" y="15" style="font-family:Times,serif;fill:red;font-size:12px">Text</text>
<text x="15" y="30" style="fill:blue;font-size:15px;opacity:.2">Here</text>
Gradients and a few other graphical elements can be defined between <def> tags near the top of the SVG file.
--- linearGradient ---
<linearGradient id="purple_red" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,0,255); stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0); stop-opacity:1"/>
</linearGradient>
<linearGradient id="purple_yellow" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:rgb(255,0,255); stop-opacity:1"/>
<stop offset="50%" style="stop-color:rgb(255,255,0); stop-opacity:1"/>
</linearGradient/>
--- radialGradient ---
<radialGradient id="green_blue" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(0,255,0); stop-opacity:.2"/>
<stop offset="100%" style="stop-color:rgb(0,0,255); stop-opacity:1"/>
</radialGradient>
Path
Start by uppercase : absolute coord ; start by lowercase : relative coord
https://developer.mozilla.org/fr/docs/Web/SVG/Tutorial/Paths
---------------------------------------------------------------------------------------------------
Move
M x y
m dx dy
<path d="M10 10"/>
Line
L x y
l dx dy
Horizontal line
H x
h dx
Vertical line
V y
v dy
<path d="M10 10 H 90 V 90 H 10 L 10 10"/>
<path d="M100 250 h120 v-150 l-60 -60 l-60 60 v150"/>
Cubic Bézier
C x1 y1, x2 y2, x y
c dx1 dy1, dx2 dy2, dx dy
<path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/>
---------------------------------------------------------------------------------------------------
Attributes for SVG objects may be assigned values in two ways. They can always be assigned in the form attribute="value", or they can frequently be assigned in a CSS style specification: style="attribute:value".
cx, cy circle, ellipse
The x and y coordinates of the center of a circle or ellipse.
<circle cx="20" cy="30" r="15" stroke="black" stroke-width="1" fill="blue"/>
fill
Almost all
This describes the color or gradient used to fill the interior of the graphics object.
<rect x="5" y="5" width="50" height="30" stroke="red" fill="green" />
opacity
Almost all
This describes the translucence of the fill color. 0 indicates tranparency, while 1 indicates complete opacity.
<rect x="5" y="5" width="50" height="30" opacity=".5" fill="green" />
stroke
All
This describes the color of the boundary of the graphics object.
<rect x="5" y="5" width="50" height="30" stroke="red" fill="green" />
width, height
rect
Specifies the width and height of a rectangle
<rect x="5" y="5" width="50" height="30" stroke="red" fill="green" />
x,y
rect, text
This gives the location of a vertex of the graphics object.
<rect x="5" y="5" width="50" height="30" stroke="red" fill="green" />
---------------------------------------------------------------------------------------------------
SVG as background
Directly in CSS
---------------------------------------------------------------------------------------------------
.diag {
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M1 0 L0 1 L99 100 L100 99' fill='black' /><path d='M0 99 L99 0 L100 1 L1 100' fill='black' /></svg>");
background-repeat:no-repeat;
background-position:center center;
background-size: 100% 100%, auto;
}
<div class="diag" style="width: 300px; height: 100px;"></div>
---------------------------------------------------------------------------------------------------
Style
---------------------------------------------------------------------------------------------------
You can safely remove the xmlns attribute if you’re supporting only HTML5-compliant browsers. Within the context of an HTML document, xmlns is implied for SVG elements.
1 - Normal css id / class
---------------------------------------------------------------------------------------------------
- works with svg inside html
<style>
#invader { ... }
#invader path { ... }
</style>
<svg id="invader" xmlns="https://www.w3.org/2000/svg" viewBox="35.4 35.4 195.8 141.8"> ... </svg>
2a - Inside svg
---------------------------------------------------------------------------------------------------
- works with svg outside html
<svg>
<defs>
<style type="text/css"><![CDATA[
.socIcon g {
fill:red;
}
]]></style>
</defs>
</svg>
2b - Inside svg
---------------------------------------------------------------------------------------------------
- works with svg outside html
<svg>
<style>
.bl {
stroke:slategray;
stroke-width:2;
}
</style>
</svg>
3 - @import - check inline / outline
---------------------------------------------------------------------------------------------------
- does not work with svg outside html
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56.69 56.69">
<style>
@import url(main.css);
</style>
<g>
<path d="M28.44......./>
</g>
</svg>