Articles
Loading articles...
Loading articles...
Here are some SVG icons:
What these icons have in common is that they are incredibly easy to make yourself!
In fact, they are so easy to make that I will just put their code here, and I am confident you will understand without any additional explanation.
<svg width="40" height="40" viewBox="0 0 10 10" stroke="goldenrod" stroke-linecap="round">
<line x1="1" y1="2" x2="9" y2="2" />
<line x1="1" y1="5" x2="9" y2="5" />
<line x1="1" y1="8" x2="9" y2="8" />
</svg>
<svg width="40" height="40" viewBox="0 0 10 10" stroke="goldenrod" stroke-linecap="round">
<line x1="2" y1="2" x2="8" y2="8" />
<line x1="8" y1="2" x2="2" y2="8" />
</svg>
<svg width="40" height="40" viewBox="0 0 12 12" stroke="goldenrod" stroke-linecap="round">
<circle cx="6" cy="6" r="5" fill="none" />
<line x1="4" y1="6" x2="8" y2="6" />
<line x1="6" y1="4" x2="6" y2="8" />
</svg>
<svg width="40" height="40" viewBox="0 0 10 10" stroke="goldenrod" stroke-linecap="round">
<line x1="1" y1="5" x2="4" y2="3" />
<line x1="1" y1="5" x2="9" y2="5" />
<line x1="1" y1="5" x2="4" y2="7" />
</svg>
<svg width="40" height="40" viewBox="0 0 10 10">
<circle cx="5" cy="4" r="2" stroke="goldenrod" fill="none" />
<rect x="2" y="4" width="6" height="4" rx="1" fill="goldenrod" />
</svg>
One thing that might be slightly confusing is the viewBox.
The viewBox defines the raster on which the elements of the SVG will be placed.
The four numbers represent the origin coordinate's X and Y values (often 0 0) and the width and height of the raster.
A viewBox of 0 0 10 10 will generate a raster with origin coordinates (0, 0), 10 columns and 10 rows.
Within this viewBox you can define the components that make up your SVG.
<svg viewBox="0 0 10 10" width="300" height="300">
<line x1="1" y1="5" x2="4" y2="3" />
<line x1="1" y1="5" x2="9" y2="5" />
<line x1="1" y1="5" x2="4" y2="7" />
</svg>
The viewBox is only used to define the position of the components on the raster. In our example the lines are positioned on a 10 by 10 raster but are scaled to a 300px by 300px icon due to the width and height attributes of the SVG.
You might have noticed that all icon definitions stay at least 1 unit away from the edge of the viewBox.
This is because strokes are centered around their path. A horizontal line with Y = 5 will be drawn from half a unit above the Y5 line to half a unit below the Y5 line. A line on the Y0 line will therefor lose half of its width.
Also, the stroke-linecap (the endings of a line or path) are drawn half a unit past the line's endpoints.
<svg viewBox="0 0 10 10" stroke="goldenrod" stroke-linecap="round">
<line x1="1" y1="0" x2="9" y2="0" />
<line x1="0" y1="2" x2="8" y2="2" />
<line x1="1" y1="4" x2="9" y2="4" />
<line x1="3" y1="6" x2="10" y2="6" />
<line x1="1" y1="8" x2="9" y2="8" />
</svg>
If you notice you are repeating the same attributes (e.g.: fill, stroke, stroke-linecap) over and over again in your elements, you might want to group them together.
This can be achieved by wrapping the elements with a <g> element.
(i) Groups can also be used when animating or styling an SVG by targeting the grouped parts by their group's id.
Some of the initial examples can also be defined as follows (notice the added <g> element):
<svg width="40" height="40" viewBox="0 0 10 10">
<g stroke="goldenrod" stroke-linecap="round">
<line x1="1" y1="2" x2="9" y2="2" />
<line x1="1" y1="5" x2="9" y2="5" />
<line x1="1" y1="8" x2="9" y2="8" />
</g>
</svg>
<svg width="40" height="40" viewBox="0 0 12 12">
<g stroke="goldenrod" stroke-linecap="round">
<circle cx="6" cy="6" r="5" fill="none" />
<line x1="4" y1="6" x2="8" y2="6" />
<line x1="6" y1="4" x2="6" y2="8" />
</g>
</svg>
(i) In our simple examples all elements share the same group. In such cases you can define the shared attributes on the <svg> element itself instead of adding a group.
<svg width="40" height="40" viewBox="0 0 10 10" stroke="goldenrod" stroke-linecap="round">
<line x1="1" y1="2" x2="9" y2="2" />
<line x1="1" y1="5" x2="9" y2="5" />
<line x1="1" y1="8" x2="9" y2="8" />
</svg>
If you are worried about the size of the SVG element in the HTML file, or you need custom shapes, you can use a path element which uses an encoding to define lines, arcs, and curves.
Certain animations can also require you to use a path instead of separate lines, circles, or rectangles.
You can learn more about the SVG path element in this MDN tutorial.
<svg width="40" height="40" viewBox="0 0 10 10" stroke="goldenrod" stroke-linecap="round">
<path d="M1,2 h8 M1,5 h8 M1,8 h8" />
</svg>
<svg width="40" height="40" viewBox="0 0 12 12" stroke="goldenrod" stroke-linecap="round" fill="none">
<path d="M6,1 A5,5,1,0,0,6,11 M6,1 A5,5,0,0,1,6,11 M4,6 h4 M6,4 v4" />
</svg>
Since you cannot draw complete circles with the arc syntax, we draw 2 semicircles instead.
Q: Where is the XML namespace (xmlns="http://www.w3.org/2000/svg") in the SVG definition?
A: When using SVG elements in an HTML5 context you do not need to specify the namespace.
Q: Why are all icons defined as squares?
A: This is personal preference. It preserves the width and height of the SVG element when rotating the icon (at least when rotating by steps of 90 degrees).
vs
Q: Do I really expect you to make all of your SVG icons yourself?
A: Of course not. But I do want to show you that it is not as impossible as you might have thought it to be.
And maybe next time you see Figma spit out a complete riddle of an SVG icon, you might think to yourself: "I can probably make that SVG icon myself!"