Issues with styling SVG when using the `<use>` element

I am currently faced with a challenge involving CSS, where I need to modify the size and color of an SVG element that is being displayed using <use>. The specific SVG in question is as follows:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
    <path fill="#000000" fill-rule="evenodd" d="<all the actual svg path info>" clip-rule="evenodd"/>
</svg>

Unfortunately, I do not have authorization to make any changes directly within the SVG itself. How I am utilizing this SVG:

<svg>
    <use xlink:href="#myIcon"></use>
</svg>

I have spent countless hours trying different approaches, even consulting an extensive article on this topic, yet I have been unsuccessful. I have attempted applying classes to both the use element and the outer svg element, as well as referencing the path element within. However, I am unable to override the default styles provided. Is there a way for me to adjust the width, height, and fill color following this structure?

csssvg

Answer №1

When adjusting the size, make sure to set the viewBox correctly and then adjust the width/height accordingly.

To change the color, you can use blending mode since the SVG color is black.

.icon {
  display: inline-block;
  background: #fff;
  position: relative;
}

.icon::after {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:var(--c);
  mix-blend-mode:lighten;
}

.icon>svg {
  display: block;
}
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
<symbol id="myIcon">
    <path fill="#000" d="M81,40.933c0-4.25-3-7.811-6.996-8.673c-0.922-5.312-3.588-10.178-7.623-13.844  c-2.459-2.239-5.326-3.913-8.408-4.981c-0.797-3.676-4.066-6.437-7.979-6.437c-3.908,0-7.184,2.764-7.979,6.442  c-3.078,1.065-5.939,2.741-8.396,4.977c-4.035,3.666-6.701,8.531-7.623,13.844C22.002,33.123,19,36.682,19,40.933  c0,2.617,1.145,4.965,2.957,6.589c0.047,0.195,0.119,0.389,0.225,0.568l26.004,43.873c0.383,0.646,1.072,1.04,1.824,1.04  c0.748,0,1.439-0.395,1.824-1.04L77.82,48.089c0.105-0.179,0.178-0.373,0.225-0.568C79.855,45.897,81,43.549,81,40.933z   M49.994,11.235c2.164,0,3.928,1.762,3.928,3.93c0,2.165-1.764,3.929-3.928,3.929s-3.928-1.764-3.928-3.929  C46.066,12.997,47.83,11.235,49.994,11.235z M27.842,36.301c0.014,0,0.027,0,0.031,0c1.086,0,1.998-0.817,2.115-1.907  c0.762-7.592,5.641-13.791,12.303-16.535c1.119,3.184,4.146,5.475,7.703,5.475c3.561,0,6.588-2.293,7.707-5.48  c6.664,2.742,11.547,8.944,12.312,16.54c0.115,1.092,1.037,1.929,2.143,1.907c2.541,0.013,4.604,2.087,4.604,4.631  c0,1.684-0.914,3.148-2.266,3.958H25.508c-1.354-0.809-2.268-2.273-2.268-3.958C23.24,38.389,25.303,36.316,27.842,36.301z   M50.01,86.723L27.73,49.13h44.541L50.01,86.723z" fill-rule="evenodd" clip-rule="evenodd"/>
  </symbol>
</svg>
<!-- your code -->
<div class="icon" style="--c:red;">
  <svg viewBox="0 0 100 125" width="100">
    <use xlink:href="#myIcon"></use>
</svg>
</div>
<div class="icon"  style="--c:green;">
  <svg viewBox="0 0 100 125" width="150">
    <use xlink:href="#myIcon"></use>
</svg>
</div>
<div class="icon" style="--c:blue;">
  <svg viewBox="0 0 100 125" width="200">
    <use xlink:href="#myIcon"></use>
</svg>
</div>

Answer №2

To convert an SVG file to an image format, simply save the SVG as an image and adjust the color and width according to your preferences. Then, insert this modified image using an img tag in your HTML file while hiding the original SVG code by setting its display to none. Without access to the HTML code, there is limited flexibility to make changes.

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

Seems like JavaScript's .active functionality is failing to function properly in my case

I'm encountering an issue with my website's homepage. I have a list of services displayed, and the intention is for a description to appear when one of the services is clicked. However, clicking on the buttons does not trigger the expected action ...

javascripthtmlcssfunction

Adjust the height to match the shortest sibling child div height

In my layout, I have multiple rows with each row containing multiple columns. Within each column, there is a div and a paragraph - the div contains an image. My goal is to set the div with the class cover-bg to the lowest height of cover-bg in the same row ...

javascripthtmljquerycss

Color-coding HTML table cells depending on the SQL flag value

After successfully constructing a SQL query that incorporates three conditions from my database table and sets a flag based on them, I have made progress in my project. The query looks like this: UPDATE staging SET `miuFlag` =1 WHERE `lowSideMIUNumAr ...

phphtmlcssmysql

Ways to align two divs side by side using CSS and HTML

Here is a question that needs solving: I have two elements that need to be displayed in one row at a specific ratio, with the same pattern repeating in subsequent rows. However, the content of the next row is appearing in the unused space of the previous r ...

htmlcss

How can I stack two appbar components from Material Ui on top of each other without the vertical line separating them?

I am facing a challenge while trying to incorporate two AppBar components in Material-UI, stacked one on top of the other. The problem arises when a line appears at the end of the first AppBar, overlapping with the second one. Click here to view an image ...

cssreactjsmaterial-uicomponentsstyling

Alternative background for browsers that do not have support for border-image styling

I am experimenting with CSS3 border-image to create a simple button design: the left slice of the image is intended to be the left border of the text, the right slice as the right border, and the middle slice should either repeat or stretch as a background ...

fallbackcss

ever-evolving background-image with dynamic CSS styling

Being new to both PHP and Javascript, please excuse any mistakes in my explanation. I have information stored in a PHP array that I bring to my index page using the function below (located in a separate file called articles.php that is included in my index ...

phpjavascripthtmlcssbackground-image

The jQuery UI Sortable functions are being triggered at lightning speed

I am currently working on a project where users can create a seating chart, add rows and tables, and move the tables between different rows. The functionality for adding rows and moving tables already exists in the code. However, I am facing an issue where ...

javascriptjqueryhtmlcssjquery-ui

Identifying flex-wrap capabilities across different browsers

Currently, I am developing a project that involves implementing a responsive grid using the flex wrap property. However, since my project needs to support IE9 and older versions of Firefox (version 28 and below), I am in need of a way to determine their ...

javascriptjquerycssflexbox

What are some strategies to stop a jQuery UI button created with a link from inheriting the link's text color?

I recently came across a recommendation to create a jQuery button on top of a link for redirect purposes: <a href="/search" class="button">My link</> $(".button").button(); However, I noticed that if the button class has a red foreground colo ...

jquerycssjquery-ui

Trouble with Flex 3 styles not fully applying to dynamically generated tabs within a TabNavigator

When using ActionScript to dynamically create a tab, I noticed that the style is applied to the skins but not to the text of the newly created tab until I click on another tab and then go back to it. ActionScript private function clickAddTabHandler(event ...

cssapache-flexactionscript-3

Is there a solution for the issue where the :after pseudo-element on a TD in IE9 does not accurately reflect the TD height?

In the design I'm currently working on, there is a requirement for a border around a table row. Due to certain complications, using the border property directly is not an option. In trying to find a solution, I have experimented with two different app ...

htmlcssinternet-explorercss-selectorspseudo-element

The primary container is brimming with an abundance of content

Can anyone help me with a CSS issue I'm experiencing in the latest versions of Chrome and Firefox? I can't seem to figure it out on my own. The problem arises with a container div that has a 50px top margin. Inside this container, there's a ...

htmlcss

Having trouble with Vuejs Ternary Operator or Conditional in v-bind-style?

Having some unexpected issues while trying to implement a style conditional for items in Vuejs. I have come across Stack Overflow posts on how to use a ternary, either through an interpolated string or a computed style object. I've attempted both met ...

javascriptcssvue.jsconditional-statementsternary-operator

Scaled-down navigation when scrolling

Is there a way to make the navigation bar shrink when scrolling, similar to how it functions on this website? The transition on this site is so seamless. I'm guessing it's achieved with JQuery. ...

jqueryhtmlcss

Enhancing the KeyValuePair by incorporating additional value or parameter

I currently have a List<KeyValue<string, int>> that I utilize in the View of one of my applications. While it functions as intended, I am interested in expanding it by potentially incorporating an additional parameter/value to the KeyValue pair ...

c#cssasp.netasp.net-mvcgenerics

Ensure that the nested div maintains its height consistently across all three columns

In my layout, I am trying to achieve uniform height for three columns, each containing the same sections like title and address. Not only do I want the cards to have the same height, but also the nested sections should maintain equal heights. For instance, ...

javascripthtmlcssflexboxcss-grid

Is it possible for jcarousel to interact with a database as well?

Hey there, I've been searching everywhere but couldn't find any information on how to make jcarousel work with a database. That's why I'm reaching out here for some help. I have a page where I'm using jcarousel. css js Currently ...

javascriptcssasp.netc#-4.0jcarousel

The browser fails to implement styling prior to a demanding workload

Is it possible to refresh a section of my webpage that contains numerous DOM elements? My ideal approach would be to hide the section using visibility: hidden;, then redraw it, and finally set visibility back to visible;. However, I've encountered an ...

javascripthtmlcssgoogle-chromedom

Modifying SVG outline colors using CSS

Why is the CSS color: #ffffff not applying to my SVG? This is how it currently looks: https://i.sstatic.net/qh7ng.png This is how I want it to look: https://i.sstatic.net/6tLo5.png Surprisingly, changing currentColor to #ffffff in the SVG itself works ...

htmlcsssvgsveltebootstrap-5