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

Maintaining the aspect ratio of images in Bootstrap Carousel: A complete guide

Using the default carousel from Bootstrap template has been working well for me. However, I've encountered an issue where resizing the browser window distorts the image aspect ratio by squishing it horizontally. I've tried various solutions to m ...

javascripthtmlcsstwitter-bootstrap

Background color for the DIV is not displaying properly when it is set to the

While trying to set the background color of a div to light blue #2390bb, I encountered an issue. Even though I have already set the body background color to Light Grey#D6D6D6, the light blue color doesn't display in the div. Can anyone help me figure ...

csshtmlcolorsbackground

Centering text in a D3 donut chart

Struggling with centering text inside a d3 donut chart for a project. While trying to modify a piece of code, I find myself lost in the complexity of it. Despite my efforts, the text added to the center is not perfectly centered. I have attempted various ...

javascriptcssd3.jsdonut-chart

Using importXML with Internet Explorer 11

My project website includes a roster page that retrieves XML data. Previously, this functionality worked across all browsers but now it only works in Chrome. In IE11, it seems that the importXML function is not functioning correctly as the roster data is m ...

javascripthtmlxmlimport

What is the best way to add a custom class alongside cdk-overlay-pane for a material menu in Angular 7?

I have a specific requirement to create a mega menu using Angular Material Menu. I attempted to apply some custom styling to the cdk-overlay-pane using my own class, but it did not work as expected. I tried to add a custom class to the mat-menu element us ...

htmlcssangularangular-materialangular7

The function for clicking is malfunctioning

I've been working with a table where I can dynamically add rows using the clone function, as shown below: new_row = $(table_id+' tbody > tr:last').clone(true).removeAttr('id').insertAfter(table_id+' tbody > tr:last&apos ...

jqueryhtmlclickonclick

Unable to position the button next to the search bar

I'm struggling to get my search bar aligned next to my dropdown button. I've tried various alignment methods without success. Both buttons are within a container, causing the search bar to span 100% of the container's width. I also attempted ...

htmlcssbuttonbootstrap-4

Weird Chrome behaviors with CSS3 animations

I have been working on a CSS3 animation that involves rotating a div with an image in the background. My goal is to have the same animation play at a different speed when the user hovers over the element. Here is the code snippet I have been using: .roc ...

htmlcsscss-animations

Tips on displaying inline span text within an anchor element, above the anchor text

Check out the code I've created below: .tooltip1 { z-index: 1; position: relative; } .tooltip1 .tooltiptext { visibility: hidden; width: 300px; ...

htmlcsspositionz-index

Display the toggle button for expanding/collapsing text only when the length of the string exceeds 50 characters

Is there a way to only show a "read more/less" button in a table if the content exceeds 50 characters? The table contains a mix of content, some short announcements with about 10 characters and others with over 100. <div class="col"> <span ng-c ...

jqueryhtmlangularcss

The confirm() function shows up before the background on a blank layout

I'm facing an issue where whenever my confirm() function pops up, the alert box displays correctly but then the background turns blank. I've tried various solutions like moving the entire if statement to the bottom of the page or at the end of th ...

javascriptphphtmlcss

When you hover over the text, the color will shift

I have created two boxes that are blue with white text and change to a different color scheme when hovered over. However, I am experiencing an issue where the text color reverts back to the original color when hovering below the text area of the box. Here ...

htmlcss

Tips for incorporating IntersectionObserver into an Angular mat-table to enable lazy loading功能？

I am looking to implement lazy loading of more data as the user scrolls down the table using IntersectionObserver. The container I am using is based on the Bootstrap grid system. However, despite using the code below, the callback function is not being tri ...

htmlangularangular-materialangular-material-table

Conceal and reveal a list on page load with jQuery

Is there a way to automatically display this listing collapsed without making changes to the HTML structure? I would like all folders in the tree to be collapsed. Instead of the initial display: https://i.stack.imgur.com/cDw4s.png I prefer it to look li ...

htmljquery

Styling React components using class names

Struggling with implementing a sidebar feature using the guidance provided in this example. However, I am facing difficulty in applying the necessary styles to each className... Here's what I've attempted so far, but unfortunately, no styles see ...

cssreactjs

Unable to execute project using CodeIgniter

I'm facing an issue with my current project. Unfortunately, I can't share the website due to confidentiality reasons. I apologize for any inconvenience this may cause. The project is built on the CodeIgniter framework, and it runs smoothly on lo ...

phphtml.htaccesscodeigniter

Is there a way to generate unique authentication numbers daily without the need to manually adjust any code

I am building a web application for commuters using vuejs and firebase. My goal is to implement the following feature: The employer provides the employee with a unique authentication code daily, which the employee (user) must enter when clicking the "go t ...

androidhtmlfirebaseapivue.js

Anticipating the arrival of the requested data while utilizing Ajax sending

Greetings, I'm currently utilizing JavaScript to send a request and receive a response from the server. xxmlhttp.open("GET","ajax_info.txt",true); xmlhttp.send(); myotherMethod(); I am looking for a way to ensure that the next set of instructions ar ...

javascriptjqueryhtmlajax

Verify if spacebar is pressed and then use jQuery to add a hashtag with multi-language support

I am attempting to use jQuery to add a hashtag (#) after the user types and presses space. I have created a demonstration on CodePen. In this demo, when you type something like (how are you), the JavaScript code will change it to (#how #are #you). To ach ...

javascriptjquerycssregexmobile

How can you incorporate a custom button into the controlBar on videoJS in responsive mode?

The video player I have created using videoJS includes custom buttons in the control bar. These buttons are not clickable when viewed on mobile or tablet devices without forcing them to work. let myButton = player?.controlBar.addChild('button'); ...

javascripthtmlcssnext.jsvideo.js