Session 7 - Scalable Vector Graphics
1. Copy SVG Script
<!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 SVG Script
<!DOCTYPE html> <html> <head> <title>SVG Ellipse and Circle</title> </head> <body> <!-- Scalable Vector Graphics --> <svg width="600" height="700"> <!-- 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> </body> </html>
Save as
svg2.html
3. Open Inkscape.
Draw logo using circles and rectangles.
Save in
Optimized svg
format as
logo.svg
.
Open in Browser.
Note: Values might be different to the script shown.
<?xml version="1.0" encoding="UTF-8"?> <!-- Created with Inkscape (http://www.inkscape.org/) --> <svg width="210mm" height="297mm" version="1.1" viewBox="0 0 210 297" xmlns="http://www.w3.org/2000/svg"> <g> <circle cx="107.33" cy="100.38" r="48.498" fill="#2b0000" stroke="#f00" stroke-width="3.0033"/> <g fill="#ff0" stroke="#ff0"> <circle cx="107.17" cy="101.28" r="23.284" stroke-width="3.4321"/> <ellipse cx="107.74" cy="65.829" rx="6.1017" ry="6.1017" stroke-width="2.7965"/> <g stroke-width="2.7965"> <ellipse cx="70.693" cy="100.63" rx="6.1017" ry="6.1017"/> <ellipse cx="106.97" cy="136.54" rx="6.1017" ry="6.1017"/> <ellipse cx="143.26" cy="100.63" rx="6.1017" ry="6.1017"/> <ellipse cx="88.647" cy="69.959" rx="6.1017" ry="6.1017"/> <ellipse cx="76.304" cy="83.424" rx="6.1017" ry="6.1017"/> </g> <g stroke-width="2.7965"> <ellipse cx="76.304" cy="118.96" rx="6.1017" ry="6.1017"/> <ellipse cx="89.395" cy="132.05" rx="6.1017" ry="6.1017"/> <ellipse cx="124.93" cy="132.05" rx="6.1017" ry="6.1017"/> <ellipse cx="139.14" cy="118.21" rx="6.1017" ry="6.1017"/> <ellipse cx="138.02" cy="83.05" rx="6.1017" ry="6.1017"/> <ellipse cx="124.55" cy="69.211" rx="6.1017" ry="6.1017"/> </g> </g> <g fill="#f00" stroke="#f00" stroke-width="3"> <rect transform="rotate(43.19)" x="84.236" y="-1.9249" width="28.427" height="3.7404"/> <rect transform="rotate(43.19)" x="84.141" y="9.4507" width="28.427" height="3.7404"/> <rect transform="rotate(43.19)" x="85.405" y="-13.796" width="28.427" height="3.7404"/> <rect transform="rotate(43.19)" x="182.93" y="-1.717" width="28.427" height="3.7404"/> <rect transform="rotate(43.19)" x="183.06" y="-14.15" width="28.427" height="3.7404"/> <rect transform="rotate(43.19)" x="182.79" y="11.245" width="28.427" height="3.7404"/> <rect transform="rotate(136.91)" x="26.368" y="-150.37" width="28.427" height="3.7404"/> <rect transform="rotate(136.91)" x="26.121" y="-138.15" width="28.427" height="3.7404"/> <rect transform="rotate(136.91)" x="27.003" y="-163.09" width="28.427" height="3.7404"/> <rect transform="rotate(136.91)" x="-71.983" y="-147.62" width="28.427" height="3.7404"/> <rect transform="rotate(136.91)" x="-70.802" y="-159.83" width="28.427" height="3.7404"/> <rect transform="rotate(136.91)" x="-71.816" y="-134.66" width="28.427" height="3.7404"/> </g> </g> </svg>
Right click on the image and save as
logo.png
in images subfolder
