So a little while ago, I decided to do a little learning on XPath, which led to a little learning on XML, which led to a little learning on SVGs.
SVGs fascinated me since I enjoy playing around in art programs. But I didn’t research them for long to avoid getting derailed from my goal of learning about XPath. Now that I've satisfied my curiosity for XPath, I can focus on SVGs!
Step 1 - Conceptualization: Overview & History
SVG stands for ‘Scalable Vector Graphics’ and are 2D graphics created using XML. XML stands for Extensible Markup Language & is a language similar to HTML that can create and manipulate various kinds of data.
SVGs are one of those “kinds of data”!
SVGs were created by several members of W3C, the World Wide Web Consortium.
A need for a scalable document format that would work well on the Web was acknowledged in 1996. Then in 1998, six competing groups proposed their own ideas to the W3C for how to handle this need.
The SVG Working Group examined all submissions and decided not to adopt any of them. Instead they opted to create an entirely new language that was very loosely inspired by the group submissions.
Some of the obvious influences came from VML: proposed by Autodesk, Hewlett-Packard, Macromedia, and Microsoft, & PGML: proposed by Adobe, IBM, Netscape, and Sun.
VMLs utilized a microsyntax, which the SVG WG created their own version of due to its noticeable ability to reduce a files size.
PGML influenced the way the SVG language would handle details like color space and transformations.
Being vector images, fonts & graphics created as SVGs can be scaled up or down without losing any quality. So (almost) no matter how it’s used on a website, it will still be smooth and readable.
They can also be used in animation, for print, mobile UIs, and GIS mapping!
Step 2 - Rough Draft: Prepping Your Art Tools
When learning to create your own SVGs, there are loads of resources.
There is an official W3C maintained website full of guides and other information. However, it does not appear to have been updated in nearly a decade at my time of research.
The popular websites MDN & W3Schools also have documentation and tutorials for working with them.
There are also a seemingly endless number of other resources you can stumble upon with a quick internet search.
SVGs manipulate three kinds of key features: shapes, text, and raster graphics. Shapes are what I will focus on the most.
Using text commands you specify a shape type, width, height, fill color, outline color and thickness, its position within the overall graphic, its rotation, gradients, patterns... There is a LOT!!
There are seven shape tags to draw with and they each have unique attributes that control their appearance.
Rectangle: <rect> - this tag creates the element and has six attributes:
X & Y are separate attributes that set the position of the rectangles top left corners.
Width & Height, also separate attributes. They set the width and height of your rectangle. You create a square by giving these two attributes the same value.
Rx & Ry are separate attributes that set the radius of the corners, which is how rounded they will be.
<rect x="0" y="0" rx="25" ry="25" width="100%" height="100%" fill="pink" />
Circle: <circle> - this element has 3 attributes:
R sets the radius of the circle, the distance from the very center to the edge. So this determines the overall size of it.
Cx & Cy are separate attributes that set the x & y position of your circle on your canvas.
<circle cx="160" cy="180" r="50" fill="pink" />
Ellipse: <ellipse> - similar to a circle, but you're able to manipulate the x & y radius using 2 of its four attributes:
Rx and Ry are the 2 attributes that separately control the x and y radius of the circle.
Ellipse also has inherited the Cx & Cy attributes from and they behave the same way.
Line: <line> - draws a single straight line between two defined points using its four attributes:
X1 and Y1 set the position of your starting point on the canvas.
X2 and Y2 set the position on your end point.
Polyline: <polyline> - creates a connected group of straight lines. All points are determined by its single attribute:
Points uses a list of paired numbers that represent the X and Y position each point will be placed that will connect the series of lines.
Polygon: <polygon> - only has one attribute that was inherited from <polyline>:
Points works exactly the same way it did in polyline, except that the first and last set points will automatically be connected by a line to create an enclosed shape.
Path: <path> - The most versatile shape tag. It can be used to create any of the shapes previously mentioned as well as creating curved lines. It does all this using a single attribute:
D is used to define the points the path will follow. But it actually has its own list of sub commands that determine how the edge of the path will look.
There are 10 sub-commands represented by letters.
The letters have case-sensitive effects: Upper will set the point at an absolute position, Lower will set the point at a relative position.
<path d="M 10 10 L 20 50 L 150 150 L 50 190 L 100 50 L 200 140" />
M (Move to) takes 2 parameters that specifies the starting position of your path drawing.
There are 4 that control straight lines: L (Line to), H (Horizontal Line to), V (Vertical Line to), & Z (Close path).
- L is given 2 numbers to represent x & y and a line is drawn from a previously listed point to this new location.
- H only takes a value for X and V only takes a value for y. They only create lines across the access they control.
- Z takes no parameters and the letter is placed alone at the end of a path node. This is because its purpose is to draw a straight line between the first and last points.
Another 4 control curved lines: C (Curve to), S (Smooth Curve to), Q (Quadratic Bezier curve), & T (Smooth Quadratic Bezier curve).
- C takes 3 pairs of x-y values. The first pair controls the curve of the previous point (M). Then the second pair controls the curve of the end point, and the third pair is the location of the end point. C uses these values to create a single curved line.
- S takes in pairs of x-y values and uses them to create and extend single curved lines. The first pair's action changes depending on if it follows another C or S point, or if it occurs after M. If it’s after M, it's treated as the first curve control point. If it follows a C or another S, it controls the curve of the point that follows it.
- Q also creates curves but requires only two pairs of x-y values. The first pair follows M and determines the curve. The second pair sets the end point of the line.
- T works like S in that it is used to extend curves from Q, or to create them on its own.
<path d="M 5 150 S 50 50, 90 90, 150 150, 185 5" stroke="black" />
<path d="M 5 150 Q 100 0 175 75" stroke="black" />
A (Arc) is used to create a section of a circle or ellipses.
It's a bit more complicated in that it accepts 7 parameters:
X-axis radius, y-axis radius, rotation of the ellipse in relation to the x-axis, a flag for whether to use a large or small arc, a flag that sets the direction of the arc, and finally the x-y coordinates for the endpoint.
Step 3 - Creation & Presentation: Display your work!
Screencap of Snap from the Cartoon 'Chalkzone'
The tags, attributes, and commands discussed above are only a drop in the bucket of what can be used to manipulate SVGs, so for now let's see what kind of art we can create by using them.
First you must choose the application you will create your masterpiece in.
An art application like Inkscape VS your standard Text Editor VS an IDE of your choice. I decided to play around using Replit.
<svg width="500px" height="50px" xmlns="http://www.w3.org/2000/svg"></svg>
Start inside the body tag of an HTML template by adding the tag pair: <svg></svg>
You then want to set the Width and Height attributes at the size you want your image to be.
The “xmlns” parameter stands for XML namespace and is important because there are multiple XML dialects. Meaning that multiple sources may use the same keyword in different ways. In order to make sure your SVG is displayed as intended, you want to specify which should be referenced.
Optionally, you can use the rectangle element to fill in your “canvas” to make it easier to understand where your available working space is.
Then start having fun using the tools we gathered before!
<svg width="450px" height="400px" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="100%" height="100%" fill="#2E8B57" />
<circle cx="160" cy="180" r="70" fill="black" />
<ellipse cx="110" cy="200" rx="30" ry="40" fill="black" transform="rotate(30 110 200)" />
<ellipse cx="160" cy="100" rx="20" ry="80" fill="black" transform="rotate(10 160 100)" />
<ellipse cx="220" cy="80" rx="20" ry="80" fill="black" transform="rotate(40 220 80)" />
<circle cx="250" cy="280" r="100" fill="black" />
<ellipse cx="150" cy="310" rx="20" ry="50" fill="black" transform="rotate(20 150 310)" />
<ellipse cx="190" cy="340" rx="20" ry="50" fill="black" transform="rotate(20 190 340)" />
<circle cx="350" cy="325" r="40" fill="black" />
</svg>
For this simple bunny, I used an extra property I didn't explain, transform, I couldn't resist playing with it. The Path tool is still a bit much for me, but I had fun overlapping shapes to create a silhouette. Tweaking the values and being able to visually see the parts they affect really helped me understand how to work with these parameters.
Since there are numerous sites where you can download free SVG files, I think I will also learn a lot by copying the code of some into an editor and start playing around.
Top comments (0)