Can a single SVG file be referenced and reused multiple times in a project?

Instead of repeating these code blocks:

<svg class="icon-user">
    <use href="LONGFILENAME.svg#icon-user">
    </use>
</svg>

<svg class="icon-user2">
    <use href="LONGFILENAME.svg#icon-user2">
    </use>
</svg>

I am looking for a way to make my SVG globally accessible or referenced so I can simplify my code like this:

<svg class="icon-user">
    <use href="#icon-user">
    </use>
</svg>

<svg class="icon-user2">
    <use href="#icon-user2">
    </use>
</svg>

Is there a solution for this scenario?

htmlcsssvg

Answer №1

When using the <use> element, the href attribute can be used to reference:

A URL reference to an element or fragment within an SVG document that is to be duplicated.

This allows you to include a separate "definitions" file containing multiple SVGs and then refer to them throughout your document.

#svgdefs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  width: 2em;
  height: 2em;
  fill: gray;
}

.icon-star {
  fill: orange;
}

.icon-star-tomato {
  fill: tomato;
}
<svg aria-hidden="true" id="svgdefs" version="2" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <symbol id="icon-lock" viewBox="0 0 32 32">
      <title>lock</title>
      <path d="M15 21.915v0c-0.583-0.206-1-0.762-1-1.415 0-0.828 0.672-1.5 1.5-1.5s1.5 0.672 1.5 1.5c0 0.653-0.417 1.209-1 1.415v2.594c0 0.263-0.224 0.491-0.5 0.491-0.268 0-0.5-0.22-0.5-0.491v-2.594zM8 14v0 0c-1.658 0.005-3 1.34-3 3.009v9.981c0 1.662 1.346 3.009 3.009 3.009h14.982c1.662 0 3.009-1.337 3.009-3.009v-9.981c0-1.659-1.341-3.005-3-3.009v-3.501c0-4.142-3.366-7.499-7.5-7.499-4.142 0-7.5 3.357-7.5 7.499v3.501zM11 14v-3.499c0-2.492 2.015-4.501 4.5-4.501 2.48 0 4.5 2.015 4.5 4.501v3.499h-9z"></path>
    </symbol>
    <symbol id="icon-star" viewBox="0 0 30 32">
      <title>star</title>
      <path d="M29.714 11.554c0 0.321-0.232 0.625-0.464 0.857l-6.482 6.321 1.536 8.929c0.018 0.125 0.018 0.232 0.018 0.357 0 0.464-0.214 0.893-0.732 0.893-0.25 0-0.5-0.089-0.714-0.214l-8.018-4.214-8.018 4.214c-0.232 0.125-0.464 0.214-0.714 0.214-0.518 0-0.75-0.429-0.75-0.893 0-0.125 0.018-0.232 0.036-0.357l1.536-8.929-6.5-6.321c-0.214-0.232-0.446-0.536-0.446-0.857 0-0.536 0.554-0.75 1-0.821l8.964-1.304 4.018-8.125c0.161-0.339 0.464-0.732 0.875-0.732s0.714 0.393 0.875 0.732l4.018 8.125 8.964 1.304c0.429 0.071 1 0.286 1 0.821z"></path>
    </symbol>
  </defs>
</svg>

<svg class="icon icon-lock"><use href="#icon-lock"></use></svg>
<svg class="icon icon-star"><use href="#icon-star"></use></svg>
<svg class="icon icon-star"><use href="#icon-star"></use></svg>
<svg class="icon icon-star icon-star-tomato"><use href="#icon-star"></use></svg>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unraveling a collection of HTML tags using Python's Beautiful Soup library

Need help parsing HTML code using Python Beautiful Soup. Trying to extract images along with their width and height properties, if available. The following code snippet indicates there are three images on a page: the first image is 300x300, the second has ...

pythonhtmlbeautifulsoup

The backdrop takes precedence over all other elements

The issue I'm facing is that the other Div is not appearing above the background. My goal is to have the background fill the entire screen. <title>The Ultimate Cube World Resource!</title> <link href="style.css" rel="stylesheet" type=" ...

htmlcss

Identifying an Iron Icon with Selenium: Tips and Techniques

Struggling to find a graceful way of handling an iron-icon using Selenium. <iron-icon style="..." icon="vaadin:sign-out" title="logout"></iron-icon> I managed to do it with Xpath and it does the job, but I'm ...

seleniumsvgxpathcss-selectorswebdriverwait

Discovering multiple classes in a CSS file can be achieved by using specific selectors and searching

I am attempting to phrase my question differently: As mentioned in a book: "multiple classes: p.testorosso.grassetto {color: red; font-weight: bold;} This rule will apply the specified styles to all elements that contain the names of the defined classes ...

css

Responsive Text and Alignment in the Latest Bootstrap 5

My goal is to center my div element while keeping the text aligned to the left. Here's the code I have: <div class="container"> <div class="row"> <div class="col"> <h1>< ...

htmlcssresponsivebootstrap-5text-styling

Transitioning from Webpack version 4 to version 5 resulted in a failure to detect certain styles

After migrating my React project to Webpack v5, I am facing an issue where none of my .scss files are being picked up when I run the project. I meticulously followed the guide on migrating webpack https://webpack.js.org/migrate/5/, updated all plugins and ...

javascriptcssreactjswebpacksass

Arrange divs in a stack when one becomes too full

Struggling to find a pure CSS solution for this issue, so seeking advice. Imagine three divs aligned horizontally next to each other. If one div overflows onto the next line, I want them to switch to a vertical stack layout. How can this be achieved? I h ...

htmlcssoverflow

The issue I'm facing is that the ng-click functionality in Angular JS is not functioning properly when the

Upon loading the page, my JavaScript function creates a tree structure from JSON data and generates a list of anchor tags which look like this: <a ng-click="shareParent(4619)">Some data</a> Despite associating the ng-click directive with the ...

javascripthtmlangularjs

Crafting an interactive saturation effect for mouseover interactions in a circular design

I'm looking to create a unique hover effect for my images. I have both a desaturated version and a full color version of the same image. My idea is to have mousing over the desaturated image reveal a circle spotlighting the color version underneath, a ...

javascriptjquerycssanimationmouseover

Creating a sticky popup feature for your Chrome extension

Just starting out with chrome extensions and looking to create one that appends an external class to a selected tag. For example, let's say we have the following tag: <h1>extension</h1> When the user clicks on this element, I want to ad ...

javascriptjqueryhtmlcssgoogle-chrome-extension

The issue arises when the Javascript function is triggered twice, resulting in only 3 out of 4

I'm currently working on a JavaScript calculator project. Everything is running smoothly except for the add() function (subtraction, multiplication, and division are all functioning properly). Additionally, when I hit "=" it displays the answer twice ...

javascripthtmlformsdom-events

Issue with the read more button inoperative for two specific paragraphs

Upon trying to implement 2 or more "Read More" buttons on my website for users to view snippets of content before downloading, I encountered an issue with the functionality only working on the first paragraph and not the subsequent ones. Despite ...

htmljquery

Encountering XMLHttpRequest errors when trying to make an AJAX POST request

I'm encountering an issue with a modal containing a form for submitting emails. Despite setting up the ajax post as usual, the submission is failing consistently. The console displays the following two errors: Setting XMLHttpRequest.withCredent ...

javascriptjqueryhtmlajaxasp.net-mvc-5

insert a div element at a static position with a height of 100%

Adding two divs on top and bottom of a fixed div is what I need to do. To achieve this, I created a panel with a fixed position on the left side. I added the first div with the h-100 class which sets its height to 100%. However, when I try to add the secon ...

htmlcsstwitter-bootstrapbootstrap-5

Preventing the page from auto-refreshing upon button click

Recently, I have encountered an issue with a button on my webpage. Every time the button is clicked, the onclick code executes and then the page refreshes. This was not a problem before, but now it seems to be automatically refreshing the page. The curren ...

jqueryhtmlbootstrap-4

What is the easiest way to import a CSS file into just one specific page in Ionic2?

Take, for instance, my desire to import the following: <link rel="stylesheet" href="mycss.css"> into example_page. I attempted importing it from index.html, but I fear that by doing so, the CSS will be loaded on every page each time I run my app. I ...

cssionic-frameworkionic2

Utilizing jQuery's each() function to create a seamless loop of background images in a

Struggling with looping the background image in a slick slider? Check out the code snippet below. var json = [ { "img_url": "https://via.placeholder.com/500x500?text=1" }, { "img_url": "https://via.placeholder.com/500x500?text=2" }, { "img_url": "ht ...

javascriptjquerycss

What is the best way to change the value of a div using JavaScript?

i could really use some assistance, i am trying to ensure that only the selected template is shown on the screen, while all others are hidden. The expected outcome should be to replace the values of: <div class="city">City<span>,< ...

javascripthtmlfunction

additional dark border streak

When you resize the browser window, you will notice a different layout for iPhone. I am seeing an additional black line below the slider and I'm unsure how to remove it. I have already tried removing the border property but the black line remains. Bel ...

htmlcssmedia-queries

How can we modify this function to interpret multiple selections at once?

For the task of displaying multiple selections from a scrolling list to an alert, I have implemented the following function: var toppings = ""; function displaySelectedToppings() { var topList = document.getElementById('to ...

javascripthtml