Utilize SVG images repeatedly while still retaining control over CSS styling

I have a collection of silhouette images that I need to change color for various purposes, such as displaying in different locations or using hover effects.

While it's fairly straightforward to achieve this by directly embedding the SVG into the HTML and applying CSS styles, the process becomes cumbersome when I have to do it repeatedly across multiple instances. It feels inefficient to duplicate the same SVG markup over and over again.

Is there a solution that allows me to style the paths with CSS while also reusing the SVG seamlessly throughout the front-end?

htmlcsssvg

Answer №1

If you're looking to reuse "symbols" in SVG, there is a specific tag for that purpose. By using the <symbol> element, you can create a symbol with an ID for later reuse:

<svg style="display: none;">
  <symbol id="ic">
      <paths and polygons and other fun stuff>
  </symbol>
</svg>

Once you've defined your symbol, you can use it elsewhere in your SVG markup by utilizing the <use> element with xlink:href, allowing you to customize it further by adding classes:

<svg viewBox="0 0 100 125" xmlns:xlink="http://www.w3.org/1999/xlink">
  <use xlink:href="#ic" class="ic-blue" x="0" y="0" />
</svg>

This technique can be powerful for creating scalable and customizable graphics in SVG. Check out more examples and content from https://tympanus.net/codrops. Remember to support them by clicking on their ads!

For additional information and detailed examples, visit: https://tympanus.net/codrops/2015/07/16/styling-svg-use-content-css/

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

Ionic directive ng-disabled not functioning as expected

Upon running the Ionic application, I noticed that the radio button is not being disabled even with the use of ng-hide.<input type="radio" ng-disabled="true"> ...

htmlangularjsionic-framework

Add a fading effect to the margin section of an HTML element

Check out this example code showcasing HTML and CSS: HTML <nav>...</nav> <div class="row"></div> CSS .nav{ margin-bottom: 10px; } I am looking to create a subtle fading effect in the bottom margin of the navbar. Can you as ...

htmlcssbootstrap-4

TinyMCE generates HTML code with embedded tags

Hey there, I'm currently facing an issue with TinyMCE that I just can't seem to solve. I've browsed through some related posts but haven't found a solution that works for me... For example: When I input something in my back office, ...

javascriptphphtmlencodingtinymce

Showing text in a textarea while maintaining formatting (such as using <br>)

Can someone help me with formatting a block of text like this: hello <br> how is your day <br> 123 To look like this: hello how is your day 123 I also need to display it in a textarea field. I attempted to do so using the following code: $ ...

javascripthtmljquery

Creating a scrollable table body in Bootstrap 4

I am struggling to make a large table mobile-friendly using Bootstrap 4. The table can have up to 10 columns and 100 rows. I need a CSS solution that achieves the following: A fixed header with each column having the same width as its respective row An x/ ...

htmlcsstwitter-bootstrapresponsive-designbootstrap-4

Incorporating @font-face webfonts into a Jekyll project

I'm currently working on incorporating webfonts into a Jekyll build. Interestingly enough, the fonts show up perfectly fine when I view them locally, but once I push my project to a live environment, the fonts mysteriously disappear. To make matters w ...

htmlcssfontsjekyllwebfonts

Display the CSS dropdown menu as a block`

I've been attempting to design a dropdown menu. My goal is for the anchor tag to display when hovered over. I understand that using display:block won't work when the 'a' is not part of the block, but I'm unsure how to proceed. Any ...

htmlcss

What is the best method for extracting specific information from an HTML webpage?

I am currently working on a project to create an MP3 song fetcher using WPF. The goal is to retrieve all the results from a webpage. However, I'm encountering issues where irrelevant data such as tags and non-downloadable links are being fetched. My ...

c#htmlwpf

Is it a universal rule for embedded css to take precedence over external css?

In my previous studies, I had learned that embedded CSS always takes precedence over external CSS. However, I have discovered that the styles that come last in the code actually prevail. Consider the following code snippet where I have used color:green; i ...

htmlcss

Is there a way to prevent continuous repetition of JavaScript animated text?

I'm working on a code that displays letters and words one by one, but I can't figure out how to stop it from repeating. Can someone help me with this? <div id="changeText"></div> <script type="text/javascript"> var te ...

javascriptjqueryhtml

Conceal a script-generated div using CSS styling

Using the code below, you can create an HTML chatbox with a link in the top panel and multiple child divs. The structure is as follows: cgroup is the parent of CBG, which is the parent of CGW, and CGW is the parent of the div I want to hide. How can I u ...

javascriptjqueryhtmlcssembed

Developing a multi-graph by utilizing several JSON array datasets

Currently exploring D3 and experimenting with creating a multi-line graph without utilizing CSV, TSV, or similar data formats. The key focus is on iterating over an array of datasets (which are arrays of objects {data:blah, price:bleh}). I am trying to a ...

javascriptjsonsvgd3.js

Sidebar Text Remains Visible Despite Collapsed Sidebar

I'm working on implementing a sidebar shrink effect when collapsing it using a combination of custom CSS, jQuery, and Bootstrap. The custom CSS and jQuery handle the shrinking effect, while Bootstrap is used for styling purposes. However, I am facing ...

htmljquerycssbootstrap-5

Is there a smooth and effective method to implement a timeout restriction while loading a sluggish external file using JavaScript?

Incorporating content from an external PHP file on a different server using JavaScript can sometimes be problematic. There are instances where the other service may be slow to load or not load at all. Is there a method in JavaScript to attempt fetching th ...

javascripthtmlajaxtimeoutexternal

What method can be used to incorporate Google Places API into a .js file without using a <script> element?

As I delve into the Google Places API documentation, I noticed that they require the API be loaded in this format: <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script> Is ...

javascripthtmlapigoogle-places-apiapi-key

Footer not being pushed down by content in mobile view on page

Hello everyone, Can you assist me with a query, please? My form works perfectly fine in desktop view, but it gets cut off on mobile view and I'm unsure of the reason why. Here is my code: .upload-pic { position: absolute; max-width: au ...

htmlcsstwitter-bootstrapbootstrap-4

Preserve menu settings by utilizing local storage

I have been working on saving the state of my menu using localstorage. The jQuery code below is what I am currently using to toggle my menu: <nav id="sidebar" class="active"> <ul class="menu"> <li> <a href="#">Customer ...

javascripthtmljquerybootstrap-4

Discovering Angular: A Guide to Displaying Dropdown Items in Dropdown Buttons

I'm seeking guidance on dropdown buttons. Here is some code I found in an example: <!--adjustbtn is a class I created to style the button--> <button class="dropdown adjustbtn" style="border-radius: 5px; box-shad ...

htmlangulartypescriptangular8

How can I define margins for a specific div in print media using CSS?

Hello everyone, I'm currently experiencing an issue with my print media CSS. On the HTML page, there are two main divs - one for the body and one for the footer. <div class="main-template-body" id="main-template-body"> //content </div> ...

htmlcssprinting

Creating a Star Rating system with jQuery using a dropdown menu for multiple selections

Recently, I came across a simple jQuery Star rating system that I want to implement on my website. I have been following the code from http://jsfiddle.net/, and it works perfectly for one star rating system. However, I have multiple star rating systems on ...

javascriptjqueryhtmlcss