Table of Contents
use Element simplified close icon
use and Element simplified clock icon
use and Element simplified envelope icon
Summarize
How many icons can be created by combining these basic shapes?
Home Web Front-end CSS Tutorial How to Simplify SVG Code Using Basic Shapes

How to Simplify SVG Code Using Basic Shapes

Apr 02, 2025 pm 06:10 PM

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>
Copy after login

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>
Copy after login

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>
Copy after login

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>
Copy after login

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>
Copy after login

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>
Copy after login

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>
Copy after login

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!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: How To Unlock Everything In MyRise
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Working With GraphQL Caching Working With GraphQL Caching Mar 19, 2025 am 09:36 AM

If you’ve recently started working with GraphQL, or reviewed its pros and cons, you’ve no doubt heard things like “GraphQL doesn’t support caching” or

Making Your First Custom Svelte Transition Making Your First Custom Svelte Transition Mar 15, 2025 am 11:08 AM

The Svelte transition API provides a way to animate components when they enter or leave the document, including custom Svelte transitions.

Show, Don't Tell Show, Don't Tell Mar 16, 2025 am 11:49 AM

How much time do you spend designing the content presentation for your websites? When you write a new blog post or create a new page, are you thinking about

Building an Ethereum app using Redwood.js and Fauna Building an Ethereum app using Redwood.js and Fauna Mar 28, 2025 am 09:18 AM

With the recent climb of Bitcoin’s price over 20k $USD, and to it recently breaking 30k, I thought it’s worth taking a deep dive back into creating Ethereum

What the Heck Are npm Commands? What the Heck Are npm Commands? Mar 15, 2025 am 11:36 AM

npm commands run various tasks for you, either as a one-off or a continuously running process for things like starting a server or compiling code.

How do you use CSS to create text effects, such as text shadows and gradients? How do you use CSS to create text effects, such as text shadows and gradients? Mar 14, 2025 am 11:10 AM

The article discusses using CSS for text effects like shadows and gradients, optimizing them for performance, and enhancing user experience. It also lists resources for beginners.(159 characters)

Creating Your Own Bragdoc With Eleventy Creating Your Own Bragdoc With Eleventy Mar 18, 2025 am 11:23 AM

No matter what stage you’re at as a developer, the tasks we complete—whether big or small—make a huge impact in our personal and professional growth.

Let's use (X, X, X, X) for talking about specificity Let's use (X, X, X, X) for talking about specificity Mar 24, 2025 am 10:37 AM

I was just chatting with Eric Meyer the other day and I remembered an Eric Meyer story from my formative years. I wrote a blog post about CSS specificity, and

See all articles