Welcome to pay attention to futu Web development team, lack of conformity
When Xiaobian first came to the company, there was a need to do a graphic animation, and I originally wanted to use pictures to do it. Toobug looked at the requirements and said you can do it in SVG. Xiaobian did not know how to use SVG at that time. Toobug looked at my innocent face and said it was fine. I have a book here called The Essence of SVG (by Toobug), take a look and learn as you go.
Ok, xiaobian after a week to see the essence of SVG, now also a primer.
So today’s edition is not for you to buy a book, just hope that our team WillWang translated this SVG introduction article will help you get started with SVG.
The body of the
One of the great advantages of scalable vector graphics (aside from the fact that they can be scaled indefinitely without mass loss) is that once you know the basics, you can easily hand-write simple shapes without having to open a drawing program.
You can have your own custom ICONS with very few lines of code, and you know exactly how each icon is put together. When you create your own SVG, you can ensure that you write them in the most efficient way possible, and that you have the most control when you use them on your site.
In this tutorial, we’ll cover all the basics of handwriting SVG, but I won’t bore you with an article that simply throws out a series of related shapes and properties. Instead, you’ll learn how to write SVG by hand, creating the six ICONS listed on the image at the beginning of this tutorial (an online example). Along the way, you’ll use all the basic elements of handwritten SVG.
Speaking of those basic elements, let’s take a quick look at each of them.
The basicSVGThe element
You can delve into the intricate details of SVG, but this is not necessary for the icon we are about to create. The following list covers the building blocks we will use.
<svg>Wraps and defines the entire vector diagram.<svg>Labels are to vector drawings what<html>Tag to a Web page.<line>I’m going to create a line.<polyline>Create polylines.<rect>Create rectangle.<ellipse>Create circles and ellipses.<polygon>Create polygons.<path>Create arbitrary shapes by specifying points and the lines between them.<defs>Define a reusable graph. In the initial case<defs>The contents are not visible.<defs>Labels are to vector drawings what<head>Tag to a Web page.<g>Combine shapes. Place the combined shape in<defs>To make it reusable.<symbol>Similar to a combination, but with some additional features. Is usually placed in<defs>Labels are easy to reuse.<use>To get in<defs>The reuse object defined in theSVGIs displayed in.
As we continue to read and create our icon, we will do so in the order of the list of elements seen above.
The starting file
Before we get started, take a start file from this GitHub repository. You can download a.zip file or clone the repository directly to your local directory.
We’ll start with a file that already contains some basic HTML and CSS. This will give some style to the SVG we are going to create, and also prepare some small grids on the page. We will create our icon on these grids and hopefully it will help you determine the coordinates when you place your SVG.
When you open the handcodedSVg.html file in the Starter Files directory, you should see something like this:
x 和 ySummary of value
On the two-dimensional plane of the website, x represents the horizontal axis and y represents the vertical axis. Positions on each axis are represented by numbers. Use increasing x to move the object to the right and decreasing x to move the object to the left. Similarly, an increasing y value is used to move the object down and a decreasing y value is used to move the object up.
A common shorthand for the x and y values of a point is (x, y). For example, a point with a value of 10 on the X-axis and 50 on the Y-axis can be written as (10, 50). I’ll use this shorthand form from time to time throughout this tutorial.
Notice the two thickest lines in our grid? We align the top left corner of the SVG with where those two lines intersect. Thus, this intersection will represent the x=0 and y=0 positions (0, 0) in our SVG.
The grid background
Each of the thinnest grid lines is 10px apart, and the medium lines are 100px apart. So if we want to move an object from one medium thickness line down to another medium thickness line, we simply increase the value on the y axis by 100px.
If this still sounds a little unclear, don’t worry, you’ll get the hang of it when we do the actual work of creating an SVG icon.
The defaultSVGstyle
Note that in the initial HTML file there is some embedded CSS that sets the default style of the icon we are going to create.
svg {
stroke: # 000;
stroke-width: 5;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
Copy the codeThe above CSS sets our icon to be unfilled, drawn with a 5px thick black line and smooth corners.
Set 1.SVG
The first step in creating any SVG is to write down a < SVG >
element. Everything you expect your SVG to display must be inside this tag. There are some attributes you can use on this element, but to keep things simple, we’ll just use width and height.
Add the following code to the tag of your HTML document:
<svg width="750" height="500">
</svg>
Copy the codeNote: The CSS in our starting file offsets the SVG by 100px down and 100px to the right to ensure that the top-left corner of the SVG is placed at the intersection of the two thickest lines in the background grid. The values may also be slightly different in the CodePen demo in this tutorial — but feel free to manipulate them.
2. To createThe lefticon
Let’s start by creating this left-aligned icon using the
You’ll use the four attributes of the line element:
x1: the horizontal axis coordinates of the starting pointy1: The vertical axis coordinate of the starting pointx2: Horizontal axis coordinates of the end pointy2: The vertical axis coordinate of the end point
In summary, you would use the properties X1 and y1 to set the starting point of the line, and the properties X2 and y2 to set the ending point of the line.
Let’s create the first line of our icon, the one at the top. We intended the line length to be 45px, however the 5px thick stroke we used will add a few extra pixels outside our line. So we need to offset the line by 3px to the bottom right to make sure that all the extra pixels generated by stroke are not cut out.
For that reason, we start our line at the X-axis coordinates 3 and the Y-axis coordinates 3. We can use the property x1=”3″ and y1=”3″ to set the starting point of the line to (3, 3).
We want our line length to be 45px, so we add 45 to our starting x-value of 3 and we get a value of 48 for x2. We want the line to end up at the same position on the horizontal axis, so we set y2 to be equal to 3, which is the same as y1. Sets the end point of the line (48, 3) with the attribute x2=”48″ and y2=”3″.
The complete code for this first line should look like this:
<line x1="3" y1="3" x2="48" y2="3"></line>
Copy the codeLook at the preview in your browser and you’ll see a rounded black line 45px long.
Now we can go ahead and add the next three lines to our icon. We’re going to end up with four lines. The first and third lines are 45px, and the second and fourth lines are 62px. We also want 16px vertical spacing between each line.
We can get the icon by using the following code:
<line x1="3" y1="3" x2="48" y2="3"></line>
<line x1="3" y1="19" x2="65" y2="19"></line>
<line x1="3" y1="35" x2="48" y2="35"></line>
<line x1="3" y1="51" x2="65" y2="51"></line>
Copy the codeNote: The y value of each line is incremented by 16px to create the desired vertical spacing.
Take a look at your browser preview again and you should see all four lines. You can also edit SVG directly in the following Codepen:
Code details: codepen. IO /new4/
Comment out your icon before we move on
With this code, your first icon is complete. We are ready to move on to the next icon. We want to create this icon in the same position on the grid, but right now the left aligned icon occupies this position. So now you need to comment out its code to clean up the space. Later, when we convert the icon into a reusable part, we will revert back to the commented out code.
You need to do the same thing for each icon we create later, that is, comment it out after we’ve created it. For this reason, it might be a good idea to add a little tip on top of the code for each icon so you know which is which when you review it later.
3. Create oneinserticon
For this icon, let’s use the polyline element derived from the line
The
We will start our insert icon at the starting point of the previous icon, which is (3, 3), ensuring that our strokes and line ends are not cut off. We want the second point to move to the right and down by 25px, so let’s set it to (30,28). Our third point should be aligned vertically with the first and moved down another 25px, so it should be set to (3,53).
You can add these points to the points property of
<polyline points="3 3 30 28 3 53"></polyline>
Copy the codeIf you want more concise code, you can also write the above code as:
<polyline points="3, 3, 30, 28, 3, 53"></polyline>
Copy the codeor
<polyline points="3 3 30 28 3 53"></polyline>
Copy the codeTake a look at your browser preview and you’ll see your insert icon displayed: another icon is done!
Code details: codepen. IO /new4/
Similarly, comment out the current icon before moving on to the next one, and add a little hint that lets you know what it is.
4. Create oneThe browsericon
Now that we have the line, let’s create some shapes starting with the rectangle (
). We’ll combine it with some < lines > to create a browser icon.
Rectangles and squares can be created using the
element.
has four properties that need to be supplied with values:
x: upper left cornerxAxis coordinate valuesy: upper left corneryAxis coordinate valueswidth: The width of the rectangleheight: The height of the rectangle
Note: You can also use the properties rx and ry to specify the rounded radius of a rectangle.
We’re going to create a rectangle with an offset of 3px in the top left corner, again to avoid cutting off the stroke, so we’ll use the property x=”3″ and y=”3″. We want it to be 80px wide and 60px high, so we use the property width=”80″ height=”60″.
So our complete rectangle code should be:
<rect x="3" y="3" width="80" height="60"></rect>
Copy the codeSave the code and preview it in your browser. You should see a neat little rectangle.
Now all we need to do is add a horizontal line at the top and a vertical line near the top left corner, just like you saw in the image at the beginning of this section. We will use the same process as before to draw the line segment. The complete browser icon code should look like this:
<rect x="3" y="3" width="80" height="60"></rect>
<line x1="3" y1="19" x2="83" y2="19"></line>
<line x1="20" y1="3" x2="20" y2="17"></line>
Copy the codeTake a moment to look at the coordinates provided by the properties of the two line segments. You can change their values slightly to see how they work in the icon.
Code details: codepen. IO /new4/
5. Create onewarningicon
Now that we can control the creation of the rectangle, let’s try using the
again. We will use two
and one
Like a rectangle, the
element requires four attributes, but these are different from the rectangle. We use horizontal and vertical radii instead of width and height, and likewise we locate by the center instead of specifying the upper left corner.
cx: Coordinates of the center position on the X-axiscy: Indicates the coordinate of the center on the Y-axisrx: the radius along the X-axis, that is, it will divide the graph into the upper and lower partsry: the radius along the Y-axis, that is, it splits the figure into left and right parts
We want a perfect circle that is 80px wide and 80px high, which means it has a radius of 40px on both axes. We set this value with rx=”40″ and ry=”40″.
We also want the circle to be flush with the two thickest lines on the graph. Assuming our circle is 80px wide and 80px high, the center of the circle should be 40px. Also, in order to avoid truncation, an offset of 3px is required, so the center point of the circle is 43px between the two axes. We set this value with the property cx=”43″ cy=”43″.
Putting these values together yields the following code:
<ellipse cx="43" cy="43" rx="40" ry="40"></ellipse>
Copy the codeViewing your browser preview, you should now see a circle on your page.
Now we’re going to add a second circle, creating the point at the bottom of the exclamation point. We’ll create it the same way, the only difference is that we’ll use the inline style to set the black fill:
<ellipse style="fill:black;" cx="43" cy="65" rx="5" ry="5"></ellipse>
Copy the codeFinally, we just need to add the exclamation mark to the other part of the line segment. Again, we will use the same technique we used to create the line segment, the only difference being that we will use the inline style to increase the stroke width from 5px to 8px.
The full code for the warning icon is as follows:
Code details: codepen. IO /new4/
6. Create oneplayicon
Now that we have some relatively fixed shapes like rectangles and ellipses, we’re going to use the polygon element to generate our own shapes. From octagon to pentagram, we can use this element to create any polygons we want. However, let’s clear things up now and create a triangle. We’ll combine it with a
element to create a play icon:
The
Let’s start with the circle at the bottom, where our polygons will be placed. We used the same circle as we used in the warning icon:
<ellipse cx="43" cy="43" rx="40" ry="40"></ellipse>
Copy the codeNow let’s create the polygon. We’re going to place three points, and between those points we’re going to automatically generate line segments to create a triangle. The points will be (35,23), (60,43) and (35,63). Thus, our polygon code will be:
<polygon points="35, 23, 60, 43, 35, 63" />
Copy the codeThe complete code for the play icon is as follows:
Code details: codepen. IO /new4/
7. Create onedownloadicon
Now, we’ll look at the most complex, but also the most flexible, method for generating SVG graphics: the
Paths can be used to create just about anything, but beyond a certain level of complexity, you’re better off designing your application using vectors rather than writing it by hand. For this reason, we will focus on a small part of the path feature and use it to create this download icon:
Technically, you can use polygons to create the shape above, but the arrow is a good way to figure out how the path element works.
We will only use the
There are many such commands, but this article will only show you the use of
MMeans move to (moveto). It USESxValues andyValue to give the starting point of a new path. Think of it as putting your mouse over a certain point on the canvas to get ready to start painting. uppercaseMMoves to a set of absolute coordinates (lowercase)mTo move to a set of relative coordinates).LMeans underline to (lineto). Draw a line from the current position to the new position. uppercaseLMoves to a set of absolute coordinates (lowercase)lTo move to a set of relative coordinates).ZIndicates a closed path. Closes the shape by drawing a straight line between the current point and the starting point of the path.
Make sure you look at these three commands (and the ICONS we’ll create with them) as a primer on the
Write yourdownloadicon
To encode the download icon path, it is recommended to add an empty path element:
<path d=""></path>
Copy the codeFrom here, add one command at a time, save and view the progress of the icon shape so you can see how it was created. I also recommend writing each command on a single line to improve readability.
- First of all, let’s move to point b
(18, 3)Theta, that’s where our arrow started. In order to complete this action, you need a property in the pathdAdd command inM 18 3. - And then we want to use
LThe command comes along from the starting pointxLet me draw an axis28pxThe line segment. To do this, we give attributesdAdd a second command:L 46 3. Look at your browser preview and you’ll see a horizontal dash. - Now with
L 46 40I’m going to go straight down37pxThe line. - And then use
L 61 40Go straight to the right15px. - Next, we’re going to start creating arrow points. We need to draw an oblique line down to the left. We use
L 32 68Finish it. - And then use
L 3 40Draw an oblique line above and to the left. - Now we use
L 18 40To complete our arrow, draw a line to the right. - In order to make our shape close, we don’t have to draw a line by specifying a point. All we have to do is add
ZCommand, it will automatically close our shape.
The final arrow icon code is as follows:
<path d=" M 18 3 L 46 3 L 46 40 L 61 40 L 32 68 L 3 40 L 18 40 Z "></path>
Copy the codeMore information about using
Code details: codepen. IO /new4/
Add 8.<defs>The element
We have finished coding the six ICONS, and we are now ready to place and reuse them in our SVG.
To do this, we’ll wrap our 6 icon codes (currently commented out) in
<defs>
<! -- All the ICONS you created so far are here -->
</defs>
Copy the codeDoing so tells the system that all ICONS we’ve completed so far are hidden by default until we explicitly use them.
Now, you can uncomment each icon and they won’t appear on the page.
9. Use<g>Creating composite Objects
There are two ways to make our ICONS readily available: to convert them into combinations, or to convert them into templates. We will convert the first half of the ICONS into a combination, and then turn the remaining half into a template so that we can illustrate the differences between them.
To convert one of our ICONS into a group, all we have to do is wrap it around the tag
Such as:
<g id="leftalign">
<! -- Align ICONS left -->
<line x1="3" y1="3" x2="48" y2="3"></line>
<line x1="3" y1="19" x2="65" y2="19"></line>
<line x1="3" y1="35" x2="48" y2="35"></line>
<line x1="3" y1="51" x2="65" y2="51"></line>
</g>
Copy the codeWrap each of the first 3 ICONS you created with
<g id="leftalign">
<! -- Align ICONS left -->
<line x1="3" y1="3" x2="48" y2="3"></line>
<line x1="3" y1="19" x2="65" y2="19"></line>
<line x1="3" y1="35" x2="48" y2="35"></line>
<line x1="3" y1="51" x2="65" y2="51"></line>
</g>
<g id="rightcaret">
<! -- Insert icon -->
<polyline points="3 3 30 28 3 53"></polyline>
</g>
<g id="browser">
<! -- Browser icon -->
<rect x="3" y="3" width="80" height="60"></rect>
<line x1="3" y1="19" x2="83" y2="19"></line>
<line x1="20" y1="3" x2="20" y2="17"></line>
</g>
Copy the codeUse 10.<use>To place the combination
Inside the
element we now have three ICONS defined as combinations that we are ready to use in SVG. To use them, all we need to do is add a
For example, add the following code to use the left-aligned icon:
<use href="#leftalign"></use>
Copy the codeTo place the icon in a specific position by specifying the values of x and y:
<use href="#leftalign" x="100" y="100"></use>
Copy the codeThe code to add all three ICONS and discharge them separately looks like this:
<use href="#leftalign" x="100" y="100"></use>
<use href="#rightcaret" x="300" y="100"></use>
<use href="#browser" x="500" y="100"></use>
Copy the codeLook in your browser and you should see three ICONS like this:
11. UsesymbolsCreating a template Object
In addition to composition, you can also use templates to define your ICONS. Templates are almost the same as combinations, but you can get extra Settings to control the viewbox and aspect ratio.
This is useful if you want to center the icon we’ve created so far. We will convert the remaining three ICONS into a template and then have them vertically fill a 100-pixel high space and center them horizontally within that space.
We create our template in the same way that we create the combination, only wrapping the code for our last three ICONS into the
But we also need to add a property called viewBox. This property allows us to define what the visible parts of each template should be. When the browser has access to this information, it can scale and arrange the template correctly.
We need to give the viewBox property four values. The first two define the upper-left corner of the icon, and the third and fourth define its width and height, respectively.
Starting with our warning icon, its width and height are 86px, so we set its viewBox property to 0, 0, 86, 86, as follows:
<symbol id="alert" viewBox="0 0 86 86">
<! -- Warning icon -->
<ellipse cx="43" cy="43" rx="40" ry="40"></ellipse>
<ellipse style="fill:black;" cx="43" cy="65" rx="5" ry="5"></ellipse>
<line style="stroke-width: 8;" x1="43" y1="19" x2="43" y2="48"></line>
</symbol>
Copy the codePlay ICONS are also 86px wide and high, while download ICONS are 64px wide and 71px high. So the code for our icon template should be:
<symbol id="alert" viewBox="0 0 86 86">
<! -- Warning icon -->
<ellipse cx="43" cy="43" rx="40" ry="40"></ellipse>
<ellipse style="fill:black;" cx="43" cy="65" rx="5" ry="5"></ellipse>
<line style="stroke-width: 8;" x1="43" y1="19" x2="43" y2="48"></line>
</symbol>
<symbol id="play" viewBox="0 0 86 86">
<! -- Play icon -->
<ellipse cx="43" cy="43" rx="40" ry="40"></ellipse>
<polygon points="35, 23, 60, 43, 35, 63" />
</g>
<symbol id="download" viewBox="0 0 64 71">
<! -- Download icon -->
<path d=" M 18 3 L 46 3 L 46 40 L 61 40 L 32 68 L 3 40 L 18 40 Z "></path>
</symbol>
Copy the codeUse 12.<use>To place the template
Now we can use our template icon just like we use our combination. However, we will also provide an icon that has the width and height attribute set to 100px:
<use href="#alert" x="100" y="200" width="100" height="100"></use>
<use href="#play" x="300" y="200" width="100" height="100"></use>
<use href="#download" x="500" y="200" width="100" height="100"></use>
Copy the codeYou will see that each template based icon is neatly filled and centered within 100px by 100px:
Try adding a width and height attribute to the
conclusion
Here is the complete code:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hand Coded SVG</title>
<style>
html.body {
height: 100%;
width: 100%;
background: #e9e9e9;
}
body {
margin: 0;
text-align: center;
}
.grid {
width: 750px;
height: 500px;
margin: 0 auto;
padding-top: 100px;
padding-left: 100px;
background-image: url('grid.png');
position: relative;
}
.grid::before {
content: "";
border-left: 1px solid #7c7cea;
position: absolute;
top: 0;
left: 100px;
width: 750px;
height: 600px;
}
.grid::after {
content: "";
border-top: 1px solid #7c7cea;
position: absolute;
top: 100px;
left: 0;
width: 850px;
height: 500px;
}
svg {
stroke: rgb(0, 0, 0);
stroke-width: 5;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
</style>
</head>
<body>
<div class="grid">
<svg width="750" height="500">
<defs>
<g id="leftalign">
<! -- Left align icon made with lines -->
<line x1="3" y1="3" x2="48" y2="3"></line>
<line x1="3" y1="19" x2="65" y2="19"></line>
<line x1="3" y1="35" x2="48" y2="35"></line>
<line x1="3" y1="51" x2="65" y2="51"></line>
</g>
<g id="rightcaret">
<! -- Right caret icon made with a polyline -->
<polyline points="3 3 30 28 3 53"></polyline>
</g>
<g id="browser">
<! -- Browser icon made with rectangle and lines -->
<rect x="3" y="3" width="80" height="60"></rect>
<line x1="3" y1="19" x2="83" y2="19"></line>
<line x1="20" y1="3" x2="20" y2="17"></line>
</g>
<symbol id="alert" viewBox="0 0 86 86">
<! -- Alert icon made with ellipses and a line -->
<ellipse cx="43" cy="43" rx="40" ry="40"></ellipse>
<ellipse style="fill:black;" cx="43" cy="65" rx="5" ry="5"></ellipse>
<line style="stroke-width: 8;" x1="43" y1="19" x2="43" y2="48"></line>
</symbol>
<symbol id="play" viewBox="0 0 86 86">
<! -- Play icon made with ellipse and polygon -->
<ellipse cx="43" cy="43" rx="40" ry="40"></ellipse>
<polygon points="35, 23, 60, 43, 35, 63" />
</g>
<symbol id="download" viewBox="0 0 64 71">
<! -- Download icon made with path -->
<path d=" M 18 3 L 46 3 L 46 40 L 61 40 L 32 68 L 3 40 L 18 40 Z "></path>
</symbol>
</defs>
<use href="#leftalign" x="100" y="100"></use>
<use href="#rightcaret" x="300" y="100"></use>
<use href="#browser" x="500" y="100"></use>
<use href="#alert" x="100" y="200" width="100" height="100"></use>
<use href="#play" x="300" y="200" width="100" height="100"></use>
<use href="#download" x="500" y="200" width="100" height="100"></use>
</svg>
</div>
</body>
</html>
Copy the codeThat covers the point of handwritten SVG! Let’s summarize what we’ve learned:
- Set up your
<svg>Element to wrap your entire figure. - use
<line>和<polyline>To create lines. - use
<rect>.<ellipse>和<polygon>To create closed shapes. - use
<path>To create whatever shape you want. - use
<g>To combine shapes. - For combinations that require additional features
<symbol> - use
<defs>The element defines the composition and template. - use
<use>Element to place the combinations and templates you define.
With this tutorial we’ve laid a solid foundation, but there’s a lot more you can do with SVG, so don’t stop there, keep digging and discover more amazing things that can be achieved!
In the meantime, hopefully you’re no longer relying entirely on vector design applications to create SVG, and you feel confident that you can hand-write some of your own graphics. For more complex graphics, design-based applications are still a viable approach, but you can do a lot with the building blocks you know, gaining the speed and control benefits of handwritten code.
A link to the
- Complete SVG element reference
<svg>element reference<line>element reference<polyline>element reference<rect>element reference<ellipse>element reference<polygon>element reference<path>element referencedattribute reference<defs>element reference<g>element reference<use>element reference<symbol>element reference
How to Hand Code SVG
By Kezz Bracey
Translator: WillWang