Svg security
svg security is exposed when your site is open to svg uploads and you are allowing website users to upload there own files and content. they may upload malicious code in the svg
tags which represent groups.
<g>
Controls the artboard of the SVG—like in Illustrator.
<svg viewBox="0 0 256 256"></svg>
Graphics that exist outside the viewbox will be cropped or changed—based on preserveAspectRatio
1
| Creating reusable graphics for within the SVG—great for making icons.
|
<symbol id="icon-smiley" viewBox="0 0 256 256">
<circle cx="128" cy="128" r="120" />
<circle cx="100" cy="104" r="12" />
<circle cx="156" cy="104" r="12" />
<path d="M100,160 Q128,190 156,160" />
<rect x="97" y="66" width="6" height="32" rx="4" ry="4" />
<rect x="153" y="66" width="6" height="32" rx="4" ry="4" />
</symbol>
1
| The <use> is how we use previously defined symbols.
|
<use xlink:href="#icon-smiley" />
Definitions
1
| Create shapes and graphics that won’t be visible until used in other places like gradients, paths for text, masks, etc.
|
<defs>
<path id="arc" d="M100,160 Q128,190 156,160" />
</defs>
Fill
<circle fill="orange" cx="100" cy="100" r="100" />
<g fill="midnightblue">
<circle cx="100" cy="100" r="100" />
</g>
1
2
3
| fill—used to set the color of a shape. Can use any colour format: keywords, # hex, rgb(), rgba()
Can be put on any element including the <svg> element.
|
Stroke
1
| Adds a line around the outside of a shape or along a path.
|
<circle stroke="orange" cx="100" cy="100" r="100" />
1
| stroke—used to set the color of a stroke. Can be any colour format: keywords, # hex, rgb(), rgba()
|
stroke width
<circle stroke-width="10" stroke="orange" cx="100" cy="100" r="100" />
1
| stroke-width—used to set the thickness of the stroke.
|
Stroke opacity
<circle stroke-opacity=".5" stroke="orange" cx="100" cy="100" r="100" />
1
| stroke-opacity—used to set the transparency of the stroke itself.
|
Text blocks
<text x="128" y="128" text-anchor="middle">Dinosaurs!</text>
1
2
3
4
5
6
| x—the “x” coordinate of the text’s anchor point.
y—the “y” coordinate of the text’s anchor point.
text-anchor—the text alignment:
start (left), middle (centre), end (right).
|
Inside text
<text x="0" y="0">
Dimetrodon is
<tspan fill="limegreen">not</tspan>
a dinosaur.
</text>
<text x="0" y="0">
Dimetrodon is
<tspan dy="-30">not</tspan>
a dinosaur.
</text>
dx—adjust
the text horizontally in relation to where it is currently.
dy—adjust
the text vertically in relation to where it is currently.
Text on a path
1
| Make text follow along with a path.
|
<defs>
<path id="arc" d="M100,160 Q128,190 156,160" />
</defs>
<textPath xlink:href="#arc">Dinosaurs!</textPath>
Font family
<text font-family="Georgia, serif">Dinosaurs!</text>
Font size
<text font-size="1.5rem">Dinosaurs!</text>
Font weight
<text font-weight="bold">Dinosaurs!</text>
Links
<a xlink:href="https://en.wikipedia.org/wiki/Dinosaurs">
<text>Dinosaurs!</text>
</a>
Images
<image width="500" height="500" xlink:href="images/stegosaurus.jpg" />
1
| Very similar to HTML’s image tag, but instead of src it’s xlink:href to point to the file.
|
Styling shapes
1
| Many of the styling attributes listed above for shapes & lines can also be used in CSS.
|
<circle class="face" cx="128" cy="128" r="120" />
1
2
3
4
5
6
| .face {
fill: yellow;
stroke: #000;
stroke-width: 6px;
stroke-dasharray: 4, 4;
}
|
Styling text
Many of the styling attributes listed above for text can also be used in CSS.
<text class="dinos">Dinosaurs!</text>
1
2
3
4
5
| .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" />
1
2
3
4
5
6
7
8
9
| .box {
fill: limegreen;
transform: rotate(45deg);
transition: all 0.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" />
1
2
3
4
5
6
| .box {
fill: green;
}
.box:hover {
fill: limegreen;
}
|
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);
}
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" />
1
2
3
4
5
6
7
| .box {
fill: green;
transition: all 0.25s linear;
}
.box:hover {
fill: limegreen;
}
|
Animations
1
2
| 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" />
1
2
3
4
5
6
7
8
9
10
11
12
13
| .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.