How to Simplify SVG Code Using Basic Shapes

There are many ways to deal with icons, but the best approach always includes SVG, whether it is implemented inline or as a link to an image file. This is because they are "drawn" in code, making them flexible, adaptable and scalable in any environment.

However, when using SVG, it is always possible to include a lot of unnecessary code . In some cases, the code for inlined SVG can be so long that the document scrolls longer and is uncomfortable to use, and yes, a little heavier than it needs to be.

We can use<use></use> Elements reuse code blocks, or apply native variables to manage our SVG styles in one place. Or, if we work in a server-side environment, we can always add some PHP (or similar) to extract the contents of the SVG file instead of putting it in directly.

This is all good, but wouldn't it be nice if we could solve this problem at the file level instead of resorting to a code-based approach? I want to focus on a different perspective: how to make the same graph with less code using basic shapes . This way, we can get the benefits of smaller, more controllable and semantic icons in the project without sacrificing quality or visual changes. I'll cover different examples, explore the code for common icons and how to repaint them using some of the simplest SVG shapes we can make.

Here are the icons we will deal with:

Let's look at the basic shapes we can use to make these icons that keep the code small and simple.

Shh! Here is a longer list of simple icons I created on holasvg.com! After reading this article, you will know how to modify them and make them yours.

use<line></line> Element simplified close icon

Here is the code for the "close" or "cross" icon downloaded from flaticon.com and built by pixel-perfect:

In this example, everything happens<path></path> Inside, there are many commands and parameters in the data attribute (d). What this SVG does is track the shape from its boundaries.

If you are familiar with Illustrator, this is equivalent to drawing two separate lines, converting them into shapes, and then combining the two with a path finder to create a composite shape.

<path></path> Elements allow us to draw complex shapes, but in this case we can create the same figure with two lines while maintaining the same appearance:

<code><svg height="50" overflow="visible" stroke="black" stroke-linecap="round" stroke-width="10" viewbox="0 0 50 50" width="50" xmlns="http://www.w3.org/2000/svg">
<line x1="0" x2="50" y1="0" y2="50"></line>
<line x1="50" x2="0" y1="0" y2="50"></line></svg></code>

We first define a viewBox, from 0,0 to 50,50. You can choose any size you like; the SVG will always scale well to any width and height you define. To simplify operations, in this case I also defined 50 units of inline width and height, which avoids additional calculations in the drawing.

To use<line></line> Element, we need to declare the coordinates of the first point of the line and the coordinates of the last point. In this example, we start with x=0 y=0 and end with x=50 y=50.

This is what the code looks like:

<code><line x2="50" y2="50"></line></code>

The second line will start with x=50 y=0 and end with x=0 y=50:

<code><line x1="50" y2="50"></line></code>

SVG strokes have no color by default - that's why we add black values ​​to the stroke attribute. We also provide 10 units of width for the stroke-width property and set the stroke-linecap to the circle value to copy those rounded corners of the original design. These properties are added directly to<svg></svg> in the tag, so both lines will inherit them.

Since the stroke is 10 units larger than its default size 1 unit, the viewBox may crop the line. We can move the point 10 units into the viewBox, or add overflow=visible to the style.

Values ​​equal to 0 can be deleted because 0 is the default value. This means that two lines end up with only two very small lines of code:

<code><line x2="50" y2="50"></line><line x1="50" y2="50"></line></code>

Just by<path></path> Change to<line></line> ,We not only create a smaller SVG file, but also create a more semantic and controllable code block, which makes any future maintenance easier. The visual effect is exactly the same as the original image.

Same cross, different codes.

use<circle></circle> and<path></path> Element simplified clock icon

I got this clock icon example from barracuda in The Noun Project:

This shape is also used<path></path> Draw, but we also have many namespace and XML directives related to the software and file license used, which we can delete without affecting SVG. Can you tell which illustration editor to use to create the icon?

Let's recreate this from scratch using a circle and a path with simpler commands. Again, we need to start with a viewBox, this time from 0,0 to 100,100, and the width and height match those units.

<code><svg fill="none" height="100" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="10" viewbox="0 0 100 100" width="100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="40"></circle><path d="M50 25V50 H75"></path></svg></code>

we will<svg></svg> The style in the label remains the same as the previous icon. fill defaults to black, so we need to explicitly assign it a none value to it in order to delete it. Otherwise, the circle will have a pure black fill, obstructing other shapes.

To draw<circle></circle> , we need to indicate the center point where the radius will be located. We can do this with cx (center x) and cy (center y). Then r (radius) will declare how big our circle is. In this example, the radius is slightly smaller than the viewBox, so it won't be cropped when the stroke width is 10 units.

What's going on with all these letters? Check out Chris Coyier's illustration guide for an introduction to SVG grammar.

We can use the clock pointer<path></path> , because it has some very useful and simple drawing commands. In d (data), we have to start with the M (move to) command followed by the coordinates we will start drawing, in this case 50,25 (near the top center of the circle).

After the V (vertical) command, we only need one value, because we can only move up or down using negative or positive numbers. A positive number will move downward. The same is true for H (level), followed by a positive number 75, which will be drawn to the right. All commands are capitalized, so the number we choose will be the points in the grid. If we decide to use lowercase letters (relative commands), the number will be the number of units we move in one direction, not the absolute point in the coordinate system.

Same clock, different codes.

use<rect></rect> and<polyline></polyline> Element simplified envelope icon

I drew the envelope icon in Illustrator without extending the original shape. Here is the code obtained from the export:

Illustrator provides some SVG options for exporting graphics. I selected "Style Element" in the "CSS Properties" drop-down menu so that I can have a tag with the category that I might want to move into the CSS file. Of course, there are many ways to apply SVG styles.

We already have some basic shapes in this code! I didn't choose the "Shape to Path" option in Illustrator, which helps a lot here. We can further optimize it using SVGOMG to remove comments, XML directives and unnecessary data such as empty elements. We can manually delete additional extras from there if needed.

We already have something simpler:

<code><svg version="1.1" viewbox="0 0 310 190" x="0" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" y="0">
 .st0{fill:none;stroke:#000;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10}
<rect height="180" width="300" x="5" y="5"></rect>
<polyline points="5 5 155 110 305 5"></polyline></svg></code>

We can delete more content without affecting the visual appearance of the envelope, including:

• version="1.1" (deprecated since SVG 2)
• (This has no meaning or purpose)
• x="0" (this is a default value)
• y="0" (this is a default value)
• xml:space="preserve" (deprecated since SVG 2)

<code><svg viewbox="0 0 310 190" xmlns="http://www.w3.org/2000/svg">
 .st0{fill:none;stroke:#000;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10}
  
<rect height="180" width="300" x="5" y="5"></rect>
<polyline points="5 5 155 110 305 5"></polyline></svg></code>

If we really want to be very aggressive, we can move the CSS styles into a separate stylesheet.

<rect></rect> Need a starting point where we will expand the width and height from there, so let's use x="5" and y="5" as our top left corner points. From there, we will create a rectangle with a width of 300 units and a height of 180 units. Just like the clock icon, we will use 5,5 as the starting point because we have a 10-unit stroke that will be cropped if the coordinates are at 0,0.

<polyline></polyline> Similar to<line></line> , but this element always defines an enclosed shape. Here is an example directly from MDN:

Remember the circles we drew for the clock icon before? Replace r (radius) with rx and ry. Now you have two different radius values. Here is another example from MDN:

Summarize

We covered a lot of content in a short period of time! While we use examples to demonstrate the process of optimizing SVG, I hope you get the following from this post:

• Remember that compression starts with the way SVG is drawn in the illustration software.
• Use available tools such as SVOMG to compress SVG.
• Manually delete unnecessary metadata if necessary.
• Replace complex paths with basic shapes.
• <use></use> Is a great way to "inline" SVGs and build your own reusable icon library.

How many icons can be created by combining these basic shapes?

I'm making my list on holasvg.com/icons, and I'm going to keep uploading more icons and features here, now you know how to easily modify them by changing a few numbers. Keep going, let them be yours!

The above is the detailed content of How to Simplify SVG Code Using Basic Shapes. For more information, please follow other related articles on the PHP Chinese website!