HTML

SVG

We can draw with HTML elements. It is called SVG which stands for Scalable Vector Graphics. You have meet it in AI files, where you can change the format to SVG. It is a document-markup languange which have focus on shapes rather than text.
SVG is a a vector image, which is created using points, lines, and shapes. You can scale vector images to any size without losing quality.


Draw with SVG

When you want to draw, you must use the SVG tag

Normal HTML here.

Normal HTML here.

CSS

svg{
outline: 1px solid green;
}

HTML

<svg xmlns="http://www.w3.org/2000/svg"> 
</svg>
Example 1.11.1

The xmlns attribute is only required on the outermost svg element of SVG documents. It is unnecessary for inner svg elements or inside HTML documents.

Title tag in SVG

We can add a title inside the SVG element. It does the same thing as the alt attribute in a image tag.
Text in a title element is not rendered as part of the graphic, but browsers usually display it as a tooltip.

SVG
<svg xmlns="http://www.w3.org/2000/svg"> 
<title>SVG</title>
</svg>
Example 1.11.2

SVG axis

SVG has a x- and y axis, which helps us to draw elements. We must tell the elements, where it should be placed, when we draw them.

SVG
Example 1.11.3

ViewBox vs ViewPort

The SVG elements have ViewBox and ViewPort.

This is a SVG element without a height and width

<svg xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="50" fill="red"/>
</svg>
Example 1.11.4

ViewPort (window)

The ViewPort is set by adding a width and height to the svg object.
It is the visible area of the SVG image. It is like a window

This is a SVG element with a width and height

<svg width="50" height="50" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="50" fill="red"/>
</svg>
Example 1.11.5

The circle hans the same size, but the SVG element is smallere. It shows what you can see in the window.

ViewBox (camera)

The viewBox attribute defines the position and dimension, in user space.
You can insert the viewBox to a SVG element by the attribute viewBox="min-y, min-x, width, height"
If the viewbox is smallere than the height or width of the SVG element will the element be bigger.
If we choose to not define a viewBox the image will not scale to match the bounds set by the viewport

viewbox="0 0 100 100"

You can see the whole element because we told the viewbox that we wanted to see the width 100% and the height 100%
viewBox="min-y, min-x, width, height"

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="50" fill="red"/>
</svg>
Example 1.11.6

viewbox="0 0 100 50"

You can see the 50% of the element height, because we told the viewbox that we wanted to see the height 50% and we can see 100% of the width
viewBox="min-y, min-x, width, height"

<svg viewBox="0 0 100 50" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="50" fill="red"/>
</svg>
Example 1.11.7

viewbox="0 0 50 50"

You can see the 50% of the element, because we told the viewbox that we wanted to see the width 50% and the height 50%
viewBox="min-y, min-x, width, height"

<svg viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="50" fill="red"/>
</svg>
Example 1.11.8

viewbox="-50 0 100 100"

You can see the 50% of the element, because we told the viewbox the elements should start on the point -50 on the y-axis
viewBox="min-y, min-x, width, height"

<svg viewBox="-50 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="50" fill="red"/>
</svg>
Example 1.11.9

viewbox="30 30 100 100"

We told the viewbox that the elements should start on the point 30 on the y-axis and x-axis
viewBox="min-y, min-x, width, height"

<svg viewBox="30 30 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="50" fill="red"/>
</svg>
Example 1.11.10

ViewBox vs ViewPort

Here is a visuel example on how the viewBox and viwePort works

SVG
Example 1.11.11

Elements

You can draw different elements in SVG.

Rectangles

<rect width, height (x, y, rx)/>
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<rect width="100" height="100"/>
<rect width="100" height="100" x="120" rx="15"/>
</svg>
Example 1.11.12

To define the height and width of the element, you can use the height and width attributes. If you want to have round corners you can use therx attributes, and if you want to change where it is placed can you use the x or y attribute.

Paths

<path d=""/>
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<path d="M10,40 20,40 20,50 30,50 30,60 40,60"/>
</svg>
Example 1.11.13

If you want to make a drawing that you don't have the elements to, you can use the path element. It has one attribute which is d, but inside d, are there others attributes.
M means "moveTo"
A means "Elliptical Arc Curve"
Q means "Quadratic Bézier Curve"

Polygons

<polygon points=" x,y x,y x,y"/>
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<polygon points="10,10 50,90 10,90"/>
</svg>
Example 1.11.14

You can se the line element, if you want to make a line. x1 and y1 tells where to start the line on the x and y axis, where x2 and y2 tells you where to stop. If you want it to be visible you can use the stroke attribute.

Lines

<line x1, y1, x2, y2, stroke="black"/>
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="80" x2="100" y2="20" stroke="black"/>
</svg>
Example 1.11.14

You can se the line element, if you want to make a line. x1 and y1 tells where to start the line on the x and y axis, where x2 and y2 tells you where to stop. If you want it to be visible you can use the stroke attribute.

Circle

<circle cx, cy, r/> 
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="50"/>
</svg>
Example 1.11.15

A circle can be made with the circle element, where you define the x and y coordinates of the circel and the center of the circle with cx and cy. The raduis of the circle is defined with the r attribute.

Ellipse

<ellipse cx, cy, rx, ry/>
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="100" cy="50" rx="100" ry="50"/>
</svg>
Example 1.11.16

An ellipse can be made with the ellipse element, where you use the cx to define the x coordinate of the center of the ellipse, where cy defines the y coordinate of the center of the ellipse.
The rx defines the horizontal radius and the ry attribute defines the vertical radius.

Text

<text x, y >Text </text>
My cat
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<style>
.small { font: italic 13px sans-serif; }
.heavy { font: bold 30px sans-serif; fill: red;}
</style>
<text x="20" y="35" class="small">My</text>
<text x="40" y="35" class="heavy">cat</text>
</svg>
Example 1.11.17

You can also insert a text in an SVG element. If you want to define the font type you can use the style attribute. In the text element can you insert a class or change there it must be placed with the x and y attribute.

SVG elements attributes

SVG groups

<g>
</g>

The <g> SVG element is a container used to group other SVG elements.
If you apply attributes to the group (fill, stroke) are they inherited by its children.

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<g fill="white" stroke="green" stroke-width="5">
<circle cx="40" cy="40" r="25" />
<circle cx="60" cy="60" r="25" />
</g>
</svg>
Example 1.11.18

SVG examples

SVG poster

You can make a poster in SVG

Colors are the smiles of nature

SVG snowman

Lets build a snowman

HTML

<svg xmlns="http://www.w3.org/2000/svg" class="svg">
<circle cx="150" cy="300" r="80" class="circle"/>
<circle cx="150" cy="180" r="50" class="circle"/>
</svg>

CSS

.svg{
width: 300px;
height: 400px;
border: 1px solid black;
}

.circle {
fill: white;
stroke: black;
stroke-width: 3px;
}
Example 1.11.19

SVG and Illustrator

You can make an illustation in illustrator and find the codes for an SVG element

  • Go to File > Export > Export As
  • Change the format to SVG (svg)
  • Press export
  • Press Show code
Example 1.11.20

SVG - part 2

SVG animation

SVG can be animated using animation elements. You could use them if you want the site to be dynmatic. Not all elements can be animated with the use of CSS some must be animated with the SVG presentation attributes or JavaScript.

SVG animation with animation attribute

We have learned how to make elements, but what if we want them to move?
Then we can use the animation attribute. There are lots of them. It could be:

Animation

When you use the animation element, must you in ordre to spcify a target use the xlink:href attribute. The attribute is a reference tot the element that must be animated over time.

When you are animating an element can you change the attributes inside the SVG elements. In order to do that must we use the from, to and dur attributes. If you want to tell when the animation should begin you must use the begin attribute.

3.8.6 Example: SVG animation (HTML)

<svg width="500" height="100">
<circle id="my-circle" r="30" cx="50" cy="50" fill="green" />
<animate xlink:href="#my-circle" attributeName="cx" from="50" to="450" dur="1s" begin="click" fill="freeze" />
</svg>

Animation attributes

xlink:href="#my-circle" is connection the element with the animation.
attributeName="cx" is used to specify the name of the attribute that you are animating.
from="50" is similar to from keyframes in animation @keyframes.
to="450" is similar to to keyframes in animation @keyframes.
dur="1s" is similar to animation-duration in CSS.
begin="click" tells the circel when to animate. You can write click but you can also set to a time value begin="0s" or begin="4s".
fill="freeze" is similar to animation-fill-mode property which tells if the element should return to its intital state or not.

This animation is also used if you want to animate a text

AnimateMotion

The animateMotion element, is a way to move an element along a path. The element accepts attributes before, but it does also accept attributes as rotate, path, and keypoints.

Here is an example on how to nest an animation inside an element. If you do that, you do not need the xlink:href attribute, because the SVG element will be the parent element of the animation element.

3.8.7 Example: SVG animation (HTML)

<svg width="200" height="100">
<path d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" stroke="black" stroke-width="1" fill="none"/>
<circle r="5" fill="red">
<animateMotion dur="10s" repeatCount="indefinite" path="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
</circle>
This is a SVG
</svg>

AnimateMotion attributes

dur is telling how fast it should take a round on the path.
repeatCount is en attribute that counts how many times the animateMotion should run.
keyPoints is an attribute that provides the ability to specify the progress along the motion path.
rotate is used if you have an icon in your SVG.
path attribute is used to specify the motion path.

Text on a path

This is a text

3.8.8 Example: SVG Text animation (HTML)

<svg width="500" height="350">
<path id="myPath" fill="none" stroke="#000000" d="M91.4,104.2c3.2-3.4,18.4-0.6,23.4-0.6c5.7,0.1,10.8,0.9,16.3,2.3c13.5,3.5,26.1,9.6,38.5,16.2c12.3,6.5,21.3,16.8,31.9,25.4c10.8,8.7,21,18.3,31.7,26.9c9.3,7.4,20.9,11.5,31.4,19"/>
<text fill="deepPink" style="font-size: 2em">
<textpath xlink:href="#myPath">This is a text</textpath>
</text>
This is a SVG
</svg>

SVG animation with CSS

You can animate SVG with the use of CSS. You can apply animation with @keyframes. You can use it this way if the animation is fairly simple, you only need to animate properties that CSS can animate and you already know, and are comfortable, with CSS animations.

This is SVG

3.8.9 Example: SVG HTML

<svg style="border: 1px solid black; height:300px; width:500px; background-color:red;" >
<g fill="lightblue">
<rect width="10%" height="50%" x="20" y="150" class="info"/>
<rect width="10%" height="60%" x="100" y="120" class="info"/>
<rect width="10%" height="40%" x="180" y="180" class="info"/>
</g>
This is SVG
</svg>

3.8.10 Example: SVG CSS

.info{ 
animation: fade 1s forwards;
}

@keyframes fade{
from {
height: 1%;
}
to {
height:100%;
}
0% {
stroke:#fff;
opacity: 1;
}
100%{
opacity: 1;
}
}

SVG and JS

SVG is an HTML element, but you can use JavaScript to edit it.



3.8.11 Example: SVG & JS (HTML)

<svg width="200" height="100">
<circle r="5" fill="red" id="movingCircle">
<animateMotion dur="10s" repeatCount="indefinite" path="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
</circle>
</svg>
<button id="blue">blue</button>
<button id="red">;red</button>

3.8.12 Example: SVG & JS (SCRIPT)

function changeBlue(){
document.getElementById("movingCircle").style.fill = "blue";
}
function changeRed(){
document.getElementById("movingCircle").style.fill = "red";
}

document.getElementById("blue").addEventListener("click", changeBlue);
document.getElementById("red").addEventListener("click", changeRed);

Moving SVG snowman

3.8.13 Example: SVG snowman (HTML)

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100.01 151.88" class="snowmanSvg">
<g>
<circle cx="45" cy="108" r="37" style="fill:#FFFFFF; stroke:#000000;"/>
<circle cx="45" cy="57" r="26" style="fill:#FFFFFF; stroke:#000000;"/>
</g>
<g style="fill:none; stroke:#7A3D3E; stroke-miterlimit:10;">
<line x1="82" y1="48" x2="82" y2="147"/>
<line x1="93" y1="48" x2="71" y2="48"/>
<line x1="72" y1="39" x2="72" y2="48"/>
<line x1="92" y1="39" x2="92" y2="48"/>
<line x1="89" y1="39" x2="89" y2="48"/>
<line x1="87" y1="39" x2="87" y2="48"/>
<line x1="85" y1="39" x2="85" y2="48"/>
<line x1="82" y1="39" x2="82" y2="48"/>
<line x1="80" y1="39" x2="80" y2="48"/>
<line x1="78" y1="39" x2="78" y2="48"/>
<line x1="75" y1="39" x2="75" y2="48"/>
</g>
<g>
<line x1="72" y1="31" x2="18" y2="31" style="fill:none;stroke:#7A3D3E;stroke-miterlimit:10;"/>
<rect x="30" y="10" width="29" height="21" fill="#7A3D3E"/>
</g>
<g>
<circle cx="53" cy="48" r="2" class="face"/>
<circle cx="35" cy="48" r="2" class="face"/>
<circle cx="30" cy="64" r="2" class="face"/>
<circle cx="35" cy="67" r="2" class="face"/>
<circle cx="47" cy="69" r="2" class="face"/>
<circle cx="53" cy="68" r="2" class="face"/>
<circle cx="58" cy="65" r="2" class="face"/>
<circle cx="41" cy="69" r="2" class="face"/>
</g>
<g>
<circle cx="43" cy="88" r="2" class="stone"/>
<circle cx="43" cy="97" r="2" class="stone"/>
<circle cx="43" cy="105" r="2" class="stone"/>
<circle cx="43" cy="113" r="2" class="stone"/>
<circle cx="43" cy="121" r="2" class="stone"/>
<circle cx="43" cy="129" r="2" class="stone"/>
</g>
</svg>