Summary of 7 methods of using SVG icons in web development

Preface

SVG (Scalable Vector Graphics) is a very popular icon format that is popular for scalability, supports transparent backgrounds and does not lose clarity. In web development, SVG icons can be embedded into pages in a variety of ways. This article will introduce 7 common methods in detail and analyze their advantages and limitations.

1. Embed SVG code directly (inline SVG)

Embedding SVG code directly into HTML is the most flexible way to have complete control over its style and interaction.

Example:

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http:///2000/svg">
  <path d="M12 2L2 12h3v8h8v-8h3L12 2z" fill="#000000"/>
</svg>

Advantages:

• Full control of styles: You can modify the color, size, animation, etc. of SVG through CSS.
• Efficient performance:SVG is a vector graph, without distortion, and has a fast loading speed.

Modify the color:

svg path {
  fill: red;
}

2. Load SVG files using the <img> tag

You can pass<img>Tags load external SVG files. SVG files can be stored on a server or local file system, referring to them directly.

Example:

<img src="" alt="Icon" width="24" height="24">

Advantages:

• Simple and easy to use: Used like ordinary pictures, suitable for static icons.
• Cacheable: You can use browser caching to reduce the burden of subsequent requests.

limit:

• Cannot modify styles directly through CSS(likefillColor, etc.). This can be bypassed by inlining or through CSS variables.

3. Embed SVG using the <object> tag

<object>Tags can be embedded in external SVG files, similar to<img>, but provides more interactive capabilities.

Example:

<object data="" type="image/svg+xml" width="24" height="24"></object>

Advantages:

• Accessibility：<object>Allows you to interact with the SVG icon (for example, you can manipulate SVG through JavaScript).
• Can retain the internal structure of SVG, allowing internal elements to be controlled via JS or CSS.

limit:

• Additional tags are required to ensure compatibility, sometimes not as good as<img>Simple.

4. Use the background-image CSS attribute

You can use CSSbackground-imageProperties use the SVG icon as background image. Suitable for buttons, icons and decorative elements.

Example:

button {
  width: 32px;
  height: 32px;
  background-image: url('');
  background-size: contain;
  background-repeat: no-repeat;
  border: none;
}

Advantages:

• concise: Suitable for icons as backgrounds, such as buttons and icon decorations.
• Supports all browsers: Most modern browsers support this method.

limit:

• The icon color cannot be modified through CSS. If you need to change the icon's color or other properties, you must modify the SVG file itself.

5. Use SVG icon fonts (such as Font Awesome)

Converting SVG icons to font icons is a popular way. Library such as Font Awesome converts SVG icons into font files and uses icons via CSS.

Example:

<i class="fas fa-home"></i>  <!-- use Font Awesome Class of -->

Advantages:

• Easy to use: Process icons like text.
• Responsive: The icon size can be easily resized by font size.
• Unified style: Unified class and style control multiple icons.

limit:

• Only control size and color, the detailed style of the icon cannot be controlled like inline SVG.

6. Use the <use> element to reference an inline SVG file

In HTML, use<use>Element references an inline SVG icon that has been defined. This method allows you to reuse the same icon and be able to control its style.

Example:

<svg width="24" height="24">
  <use href="#icon-id" rel="external nofollow" ></use>
</svg>

<!-- Define icon -->
<svg style="display: none;">
  <symbol  viewBox="0 0 24 24">
    <path d="M12 2L2 12h3v8h8v-8h3L12 2z"></path>
  </symbol>
</svg>

Advantages:

• Reusable: The same icon can be used multiple times on the same page.
• Flexible control: The icon style can be modified through JavaScript or CSS.

7. Dynamically load SVGs through JavaScript

If you need to change the icon based on user interaction or other dynamic situations, you can dynamically load the SVG via JavaScript.

Example:

const img = ('img');
 = '';
(img);

Advantages:

• Dynamic generation: The SVG icon can be inserted as needed after the page is loaded.

Summarize

This is the end of this article about 7 methods of using SVG icons in web development. For more related content on using SVG icons in web development, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!