SVG used on site
This is the code for the SVG images used on this site.
SVG fundamentals
Capital letters mean absolutely positioned (e.g. draw a line to the exact coordinate x)
Lower case letters mean relatively positioned
path = defines a path
style = sets a style for path
id = Id of path
width = width
height = height
x = x position (right/left)
y = y position (down/up)
d = path to be drawn
m = move to x right, y down (negative values are reversed left, up)
Top of Square
h = horizontal line to relative position x
a = elliptical arc curve
Right side of square
v = vertical line to
a = elliptical arc curve
Bottom of Square
h = horizontal line to relative position x
a = elliptical arc curve
Left side of square
v = vertical line to
a = elliptical arc curve
z = close path by drawing stright line back to start
The way to go is, define the object in defs and then reuse it.
<use href="#square00" transform="translate(50 100)" />
IMPORTANT The <style> set in the <def> tag cannot be changed at the <use> tag level
X in a circle
The image and code for an X in a circle.
The line colour has been changed to black, so that it is visible against the background.
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="none" stroke="#fff" stroke-width="2" >
<g>
<path d="M19 18 l26 26"/>
<path d="M19 44 l26-26"/>
</g>
<circle cx="32" cy="32" r="31"/>
</svg>
Table mountain
The image and code for the image of Table mountain with animated cable cars.
The code includes comments.
<svg
class="square_tbl_mtn"
width="100%"
height="100%"
viewBox="0 0 810 100"
version="1.1"
id="svg5"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<style type="text/css">
.square_tbl_mtn {
--FillColor: #fbc02dff;
--FillOpacity: 0.6;
--StrokeColor: #000000;
--StrokeWidth: 1;
}
</style>
</defs>
<defs>
<g id = "rect00" class = "unitrect00">
<rect id="square00"
width="10"
height="10"
rx="1.3"
fill="var(--FillColor)"
fill-opacity = "var(--FillOpacity)"
stroke = "var(--StrokeColor)"
stroke-width = "var(--StrokeWidth)"
/>
<rect id="square01"
width="4"
height="4"
rx="1.3"
fill="var(--FillColor)"
fill-opacity = "var(--FillOpacity)"
stroke = "var(--StrokeColor)"
stroke-width = "var(--StrokeWidth)"
/>
</g>
</defs>
<g class="m-down">
<!-- Devils Peak -->
<use href="#square00" transform="translate(0 90)" />
<use href="#square00" transform="translate(10 90)" />
<use href="#square00" transform="translate(20 90)" />
<use href="#square00" transform="translate(20 80)" />
<use href="#square00" transform="translate(30 80)" />
<use href="#square00" transform="translate(40 80)" />
<use href="#square00" transform="translate(40 70)" />
<use href="#square00" transform="translate(50 70)" />
<use href="#square00" transform="translate(60 70)" />
<use href="#square00" transform="translate(60 60)" />
<use href="#square00" transform="translate(70 60)" />
<use href="#square00" transform="translate(80 60)" />
<use href="#square00" transform="translate(80 50)" />
<use href="#square00" transform="translate(90 50)" />
<use href="#square00" transform="translate(100 50)" />
<use href="#square00" transform="translate(100 40)" />
<use href="#square00" transform="translate(110 40)" />
<use href="#square00" transform="translate(120 40)" />
<use href="#square00" transform="translate(120 30)" />
<use href="#square00" transform="translate(130 30)" />
<use href="#square00" transform="translate(140 30)" />
<use href="#square00" transform="translate(140 20)" />
<use href="#square00" transform="translate(150 20)" />
<use href="#square00" transform="translate(150 10)" />
<use href="#square00" transform="translate(160 10)" />
<use href="#square00" transform="translate(170 10)" />
<use href="#square00" transform="translate(160 0)" />
<!-- Top of Devils Peak -->
<use href="#square00" transform="translate(170 20)" />
<use href="#square00" transform="translate(180 20)" />
<use href="#square00" transform="translate(180 30)" />
<use href="#square00" transform="translate(190 30)" />
<use href="#square00" transform="translate(200 30)" />
<use href="#square00" transform="translate(200 40)" />
<use href="#square00" transform="translate(210 40)" />
<use href="#square00" transform="translate(220 40)" />
<!-- Bottom of Devils Peak-->
<!-- Table Mountain to Plattekloof -->
<use href="#square00" transform="translate(220 30)" />
<use href="#square00" transform="translate(230 20)" />
<use href="#square00" transform="translate(240 10)" />
<use href="#square00" transform="translate(250 10)" />
<use href="#square00" transform="translate(260 10)" />
<use href="#square00" transform="translate(270 10)" />
<use href="#square00" transform="translate(280 10)" />
<use href="#square00" transform="translate(290 10)" />
<use href="#square00" transform="translate(300 10)" />
<use href="#square00" transform="translate(310 10)" />
<use href="#square00" transform="translate(320 10)" />
<use href="#square00" transform="translate(330 10)" />
<use href="#square00" transform="translate(340 10)" />
<use href="#square00" transform="translate(350 10)" />
<use href="#square00" transform="translate(360 10)" />
<use href="#square00" transform="translate(370 10)" />
<use href="#square00" transform="translate(380 10)" />
<use href="#square00" transform="translate(390 10)" />
<use href="#square00" transform="translate(400 10)" />
<use href="#square00" transform="translate(410 10)" />
<use href="#square00" transform="translate(420 10)" />
<use href="#square00" transform="translate(430 10)" />
<use href="#square00" transform="translate(440 10)" />
<!-- Plattekloof -->
<use href="#square00" transform="translate(440 20)" />
<use href="#square00" transform="translate(430 30)" />
<use href="#square00" transform="translate(420 40)" />
<use href="#square00" transform="translate(410 50)" />
<!-- Plattekloof to Cable Station -->
<use href="#square00" transform="translate(450 10)" />
<use href="#square00" transform="translate(460 10)" />
<use href="#square00" transform="translate(470 10)" />
<use href="#square00" transform="translate(480 10)" />
<use href="#square00" transform="translate(490 10)" />
<use href="#square00" transform="translate(500 10)" />
<use href="#square00" transform="translate(510 10)" />
<use href="#square00" transform="translate(520 10)" />
<use href="#square00" transform="translate(530 10)" />
<use href="#square00" transform="translate(540 10)" />
<use href="#square00" transform="translate(550 10)" />
<!-- Cable Station -->
<use href="#square00" transform="translate(540 0)" />
<!-- Cable Car 1 -->
<use href="#square01" transform="translate(543 3)">
<animateTransform
attributeName="transform" type="translate"
values="0 0;
10 60;
0 0"
additive="sum"
dur="30s"
repeatCount="indefinite" />
</use>
<!-- Lower Cable Station -->
<use href="#square00" transform="translate(550 60)" />
<!-- Cable Car 2 -->
<use href="#square01" transform="translate(553 63)">
<animateTransform
attributeName="transform" type="translate"
values="0 0;
-10 -60;
0 0"
additive="sum"
dur="30s"
repeatCount="indefinite" />
</use>
<!-- Cable Station to Kloofnek -->
<use href="#square00" transform="translate(550 20)" />
<use href="#square00" transform="translate(560 20)" />
<use href="#square00" transform="translate(570 30)" />
<use href="#square00" transform="translate(570 40)" />
<use href="#square00" transform="translate(580 40)" />
<use href="#square00" transform="translate(580 50)" />
<use href="#square00" transform="translate(590 50)" />
<use href="#square00" transform="translate(600 50)" />
<!-- Kloofnek -->
<use href="#square00" transform="translate(600 60)" />
<use href="#square00" transform="translate(610 60)" />
<use href="#square00" transform="translate(620 60)" />
<use href="#square00" transform="translate(630 60)" />
<use href="#square00" transform="translate(630 70)" />
<use href="#square00" transform="translate(640 70)" />
<use href="#square00" transform="translate(650 70)" />
<use href="#square00" transform="translate(660 70)" />
<use href="#square00" transform="translate(670 70)" />
<!-- Kloofnek to Lions Head-->
<use href="#square00" transform="translate(660 80)" />
<use href="#square00" transform="translate(650 90)" />
<use href="#square00" transform="translate(670 60)" />
<use href="#square00" transform="translate(680 60)" />
<use href="#square00" transform="translate(690 50)" />
<use href="#square00" transform="translate(700 50)" />
<use href="#square00" transform="translate(710 50)" />
<use href="#square00" transform="translate(720 50)" />
<!-- Lions Head -->
<use href="#square00" transform="translate(700 40)" />
<use href="#square00" transform="translate(710 40)" />
<use href="#square00" transform="translate(720 60)" />
<use href="#square00" transform="translate(730 60)" />
<use href="#square00" transform="translate(740 60)" />
<use href="#square00" transform="translate(740 70)" />
<use href="#square00" transform="translate(750 70)" />
<use href="#square00" transform="translate(760 70)" />
<use href="#square00" transform="translate(760 80)" />
<use href="#square00" transform="translate(770 80)" />
<use href="#square00" transform="translate(780 80)" />
<use href="#square00" transform="translate(780 90)" />
<use href="#square00" transform="translate(790 90)" />
<use href="#square00" transform="translate(800 90)" />
</g>
</svg>