SVG Optimization 01

Description: Lesson 01 SVG PrimerSVG origin 00 is at the top left coordinates are XYLine 2 Draw a rectangle at 100100 With no stroke or fill specified it defaults to a black fillLine 3 Move to 200200 without drawing Line to 300200Line 4 Same as line 4 but with a path command if you leave out the L line command and enter coordinates L is assumedLine 5 Uses relative coordinates instead of absolute Lowercase letters are used here to specify relative coordinates Lowercase l means the next coordinate is relative to the the first coordinate In this case move 100px in the x direction and 0 in the y directionLine 6 You can also leave out the lowercase l it is assumedLine 7 Draw a squareLine 8 Draw a circle with a radius of 50 in the same coordinates as the square Notice the circle specifies coordinates by its center If we want a square in the same location we need to adjust its x and y coordinatesLine 9 Draw a shape with a stroke and fill Start at 200700 Draw a line 100px horizontally and 0 vertically Draw a line 50px horizontally and 50px vertically which is the bottom vertex of the triangle z closes the shapeTheres an error in this code a square showed up as black when I wanted blue because the color should be 00fModify your SVG code its often easier than using Inkscape

By: SunKing2

Date: 2018-01-13

Block Explorer: View Transaction

Downloads: 139

Filesize: 628

Tags: optimization SVG SVG Tutorial Tutorial

Download

Large PNG 2400px

Medium PNG 800px

Small PNG 300px

Javascript is needed to download PNG's.


SVG Optimization 01 sourced from Openclipart is licensed under CC0 1.0

* Note: Date might not match original source and might be an educated guess.