📅 Fri, Sep 13, 2024 ⏲️ ~ 4 minutes Beginner

Methods to Insert SVG in HTML

Scalable Vector Graphics (SVG) is a format for representing vector graphics, which is very useful when developing web pages.

However, it can sometimes be a mess because there are several ways to insert SVG into HTML *(of course, each with its own advantages and disadvantages):

So let’s look at the most common methods for inserting an SVG into HTML, examining the advantages and disadvantages of each method.

Method	CSS Modification	Reuse	Use in `::before`/`::after`
`<img>`	No	Yes	No
`background-image` in CSS	No	Yes	Yes
`mask` or `clip-path` in CSS	Yes (background color)	Yes	Yes
Inline SVG (`<svg>` in HTML)	Yes	No	No
`<symbol>` and `<use>`	Yes	Yes	No
`<object>` or `<iframe>`	Limited	Yes	No

In summary

Simple Options: Methods like <img> or background-image
Allow modification from CSS: We can use mask (only color) or <symbol>/<use> for full control
To use in before/after: Use background-image or mask in CSS
For reuse: The <img> or <symbol> and <use> options

Insert SVG as an Image

This is the simplest method for inserting an SVG into a web page, similar to how images in formats like JPG or PNG are inserted.

<img src="icono.svg" alt="Icon">

Simplicity: It is one of the easiest ways to insert SVG into a web page
Reuse: You can use the same SVG file in multiple places without having to repeat the code

Style Modification: Does not allow changing the color of the SVG through CSS. The SVG is rendered as an image
Limited Accessibility: You cannot manipulate the content of the SVG or add interactivity from HTML or CSS

Use SVG as Background

This method is ideal for using SVGs as decorative backgrounds for elements, applying the SVG as a background image in CSS.

.icon {
    width: 50px;
    height: 50px;
    background-image: url('icono.svg');
}

Simple Styling: Suitable for using SVGs as background decorations on elements.
Can be used in After and Before: You can use it with After and Before pseudo-elements.

Style Modification: You cannot change the color of the SVG using CSS, as the SVG is treated as a background image
Interactivity Limitations: You cannot apply effects or interactivity directly to the SVG.

Insert SVG Directly into HTML

Another option is to copy the SVG code directly into the HTML.

<svg width="50" height="50" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
    <path d="M10 10 H 90 V 90 H 10 Z" />
</svg>

Color Modification: Allows the use of CSS properties like fill, stroke, and currentColor to change the color of the SVG
Full Control: You can apply CSS styles directly to the SVG or from an external stylesheet, and manipulate its content with JavaScript

Code Redundancy: If you need to use the same SVG in multiple places, the code can become repetitive and bulky

Use Symbol and Use

A more modern approach is to define an SVG once in the document using symbol.

<svg style="display:none;">
  <symbol id="icon" viewBox="0 0 100 100">
    <path d="M10 10 H 90 V 90 H 10 Z" />
  </symbol>
</svg>

Subsequently, we can reuse it in various places with use

<svg width="50" height="50" fill="currentColor">
  <use href="#icon"></use>
</svg>

Efficient Reuse: Allows defining an SVG once and reusing it in multiple places.
Style Modification: You can change the color with CSS and apply other styles.

Complexity: Needs to be present in the same HTML document or be correctly referenced from external files.

Use Object

This method inserts the SVG as an object or within an embedded frame, allowing for greater control via JavaScript.

<object data="icono.svg" type="image/svg+xml"></object>

Access to SVG DOM: Allows manipulation of the SVG with JavaScript, which can be useful for advanced interactions

Style Modification: Not ideal for changing colors with CSS. The SVG is treated as a separate object
Compatibility and Performance: There may be performance and compatibility issues in some browsers

Use CSS `mask`

If you need to change the color of an SVG when used as a background, you can use masks (mask) or clipping paths (clip-path)

.icon {
    width: 50px;
    height: 50px;
    background-color: red;
    mask: url('icono.svg') no-repeat center;
}

Color Change: Allows modifying the color of the SVG through the background color of the element.
Can be used in After and Before: You can use it with After and Before pseudo-elements.

Limited Flexibility: Less flexible regarding the customization of the SVG
Compatibility Issues: In older browsers