Scalable Vector Graphics
1. Copy HTML Script into Editor.
<!DOCTYPE html> <html lang="en-US"> <head> <title>SVG Shapes</title> </head> <body> <!-- Scalable Vector Graphics - Shapes --> <svg width="600" height="600"> <!-- Rectangle --> <rect width="300" height="100" fill="rgb(155,0,0)" stroke="rgb(255,0,0)" stroke-width="1" /> <!-- Rectangle with round corners and slightly transparent --> <rect x="350" y="20" rx="20" ry="20" width="150" height="150" style="fill:green;stroke:black;stroke-width:5;opacity:0.5" /> <!-- Circle with centre at 80,300 and radius of 50 --> <circle cx="80" cy="300" r="50" stroke="black" stroke-width="3" fill="red" /> <!-- Ellipse with centre at 200,80 and x radius of 100 and y radius of 50 --> <ellipse cx="200" cy="180" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" /> <!-- Shape with three sides --> <polygon points="300,350 400,200 500,350" fill="rgba(0,0,255,0.5)" stroke="rgb(0,0,255)" stroke-width="1" /> <!-- Text as a Vector Graphic --> <text x="10" y="475" fill="red" font-size="48px" font-family="arial">These are shapes</text> </svg> </body> </html>
Save as
SVG1.html
2. Copy HTML Script into Editor
<!DOCTYPE html> <html> <head> <title>SVG One Square of Triangles Using Path</title> </head> <body> <!-- Scalable Vector Graphics Repeating Pattern --> <svg width="600" height="700"> <!-- Text as a Vector Graphic --> <text x="10" y="275" fill="red" font-size="16px" font-family="arial">Square of triangles using path d</text> <!-- Triangles drawn using path --> <!-- M = Move L = Line Z = Close --> <path d="M0 0 L125 125 L0 250 Z" fill="yellow" /> <!-- left yellow --> <path d="M0 0 L125 125 L250 0 Z" fill="red" /> <!-- top red --> <path d="M250 0 L125 125 L250 250 Z" fill="green" /> <!-- right green --> <path d="M250 250 L125 125 L0 250 Z" fill="blue" /> <!-- bottom blue --> </svg> </body> </html>
Save as
SVG2.html
3. Copy SVG Script
<!-- Scalable Vector Graphics --> <svg width="600" height="700" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Circle with centre at 300,100 and radius of 75 --> <circle cx="300" cy="100" r="75" style="stroke:black; fill:pink" /> <!-- Same circle using two curves moved left to 100 --> <path d=" M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0" style="stroke:black; fill:lime" /> <!-- Ellipse with centre at 200,250 and x radius of 100 and y radius of 50 --> <ellipse cx="200" cy="250" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:1" /> <!-- Same ellipse using two curves moved down to 400--> <path d="M 100,400 a 100,50 0 1,0 200,0 a 100,50 0 1,0 -200,0" style="stroke:black;fill:cyan" /> <!-- Text as a Vector Graphic --> <text x="10" y="550" fill="red" font-size="32px" font-family="arial">Circle and Ellipse using labels and path d </text> </svg>
Save as
circles.svg
4. Copy Logo SVG Script
<!-- Scalable Vector Graphics - Logo --> <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <circle cx="100" cy="100" r="75" stroke="red" stroke-width="5" fill="black" /> <circle cx="100" cy="100" r="30" fill="yellow" /> <!-- Circle of Yellow Circles --> <g fill="yellow"> <circle cx="155" cy="100" r="12" /> <circle cx="45" cy="100" r="12" /> <circle cx="100" cy="45" r="12" /> <circle cx="100" cy="155" r="12" /> <!-- More Circles of Yellow Circles --> <circle cx="72" cy="53" r="12" /> <circle cx="72" cy="147" r="12" /> <circle cx="128" cy="53" r="12" /> <circle cx="128" cy="147" r="12" /> <circle cx="53" cy="72" r="12" /> <circle cx="53" cy="128" r="12" /> <circle cx="147" cy="72" r="12" /> <circle cx="147" cy="128" r="12" /> </g> <!-- Red Bars --> <g fill="none" stroke="red" stroke-width="10"> <!-- Top Left --> <line x1="30" y1="10" x2="70" y2="50" /> <line x1="20" y1="20" x2="60" y2="60" /> <line x1="10" y1="30" x2="50" y2="70" /> <!-- Top Right --> <line x1="150" y1="70" x2="190" y2="30" /> <line x1="140" y1="60" x2="180" y2="20" /> <line x1="130" y1="50" x2="170" y2="10" /> <!-- Bottom Left --> <line x1="70" y1="150" x2="30" y2="190" /> <line x1="60" y1="140" x2="20" y2="180" /> <line x1="50" y1="130" x2="10" y2="170" /> <!-- Bottom Right --> <line x1="150" y1="130" x2="190" y2="170" /> <line x1="140" y1="140" x2="180" y2="180" /> <line x1="130" y1="150" x2="170" y2="190" /> </g> </svg>
Save as
logo.svg
Mob Map
Open
Inkscape
and create the map.
Gooreng
Gooreng
Badtjala
Gubbi
Gubbi
Waka
Waka
Edit the script.
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 500" height="500" width="300" id="svg2" version="1.1"> <g style="stroke:#0000ff;stroke-width:2;"> <path id="Gooreng Gooreng" d="m 19.435819,52.933534 c 18.794473,57.411126 11.259813,74.450936 0,85.778836 -2.735008,12.54814 -8.310415,24.22231 1.504892,40.63209 l 9.029351,38.37474 c 2.91691,12.80798 6.55847,24.3478 13.49796,30.11627 3.53597,-11.26585 11.22874,-24.17802 31.6488,-41.40296 l 28.592938,-21.06849 c 8.53414,-4.6455 17.08365,-9.20396 28.59295,3.00979 l 12.79158,12.03913 27.8405,-9.7818 13.54403,-11.28668 4.51468,2.25733 14.29647,-12.03913 -29.75387,-29.68937 -19.90756,-25.99163 c -4.42011,-10.56029 -5.43343,-20.552774 -3.76223,-30.097842 L 136.06494,68.734899 C 132.64399,61.611624 133.09988,51.719174 123.27336,49.171304 L 100.69998,30.360155 90.165742,16.816128 C 69.527782,28.267526 45.122372,40.472415 19.435819,52.933534 Z" style="fill:#00ffff;" /> <path id="Waka Waka" d="m 43.468022,247.83547 c -5.5862,9.68757 46.46669,71.21228 28.01863,122.46749 -8.25629,11.86753 -3.95341,27.37822 7.23577,33.89385 18.6813,10.87841 36.018138,31.43434 46.080398,75.02347 12.52428,-9.097 24.83089,-15.14678 36.11934,-6.94223 6.54651,1.65117 12.27541,8.20801 18.24426,13.32516 4.55066,9.10133 13.58346,3.78623 15.32825,-4.09796 6.47411,-11.04405 15.99485,-14.47153 15.99485,-14.47153 l 5.01416,-0.90454 c -37.8475,-79.63375 -96.485,-118.75354 -70.40939,-265.71624 -11.7977,-4.32996 -16.67956,-29.25461 -41.38453,-15.04892 l -28.592938,21.06849 c -11.20944,11.16161 -23.36635,18.53339 -31.6488,41.40296 z" style="fill:#ffff00;" /> <path id="Gubbi Gubbi" d="m 145.09429,200.41294 27.8405,-9.7818 13.54403,-11.28668 4.51468,2.25733 14.29647,-12.03913 1.40725,31.98182 c 5.53579,0.69197 9.05746,13.01767 10.32746,14.6009 2.10219,2.62067 9.25911,11.75194 9.25911,11.75194 -4.69727,-1.34208 -21.54776,12.20909 -26.70896,22.79165 -11.62389,13.17642 -4.28128,29.55791 -1.06836,29.55791 6.4325,9.19374 14.128,17.37709 25.28448,22.79165 l 22.79165,3.91731 1.06835,17.44986 v 16.02537 l -5.34179,14.24478 -5.34179,15.31314 7.83463,22.07941 -3.5612,27.06507 -0.35612,7.47851 -7.83462,34.89971 -17.54638,4.61749 c -20.88395,-41.21861 -55.10073,-87.35089 -69.86591,-140.45172 -10.69969,-38.47987 -9.36038,-80.60121 -0.54348,-125.26452 z" style="fill:#00ff00;" /> <path id="Badtjala" d="m 226.28379,227.89732 c -12.11187,3.31871 -19.35745,13.1258 -26.70896,22.79165 -10.4142,15.05509 -6.09248,22.48816 -1.06836,29.55791 6.19435,9.54582 15.05466,16.76607 25.28448,22.79165 l 22.79165,3.91731 0.71223,-7.12239 7.83463,-6.05403 c 0.83147,-9.41564 3.69626,-12.05351 6.05403,-16.38149 0.5724,-13.40782 4.00561,-11.55803 6.05403,-17.09374 l 2.84896,-21.72328 8.54687,-11.75195 -1.7806,-9.97134 -8.90299,3.56119 -0.35612,4.98568 -6.05403,-4.27344 -5.69791,5.3418 0.71224,11.75194 3.20508,6.05403 c -2.07098,2.32985 -2.27197,17.86911 -1.42448,13.88866 0.41951,-1.97035 -7.83463,13.53254 -6.41015,12.10806 1.42448,-1.42448 -3.5612,8.19075 -3.5612,8.19075 l -1.78059,9.61522 c 0,0 0.71223,5.69791 -0.71224,4.98567 -1.42448,-0.71223 -9.25911,-21.01104 -9.25911,-21.01104 l 1.42448,-19.94269 -2.49284,-11.75195 z" style="fill:#d40000;" /> </g> <g style="stroke:#0000ff;stroke-width:1;font-size:30px;"> <text x="0" y="25" transform="translate(90, 20) rotate(60)">Gooreng</text> <text x="0" y="75" transform="translate(90, 20) rotate(60)">Gooreng</text> <text x="175" y="275">Badtjala</text> <text x="175" y="325">Gubbi</text> <text x="175" y="375">Gubbi</text> <text x="75" y="350">Waka</text> <text x="75" y="400">Waka</text> </g> </svg>
