img src SVG changing the styles with CSS

A

André Kuhlmann

You could set your SVG as a mask. That way setting a background-color would act as your fill color.

HTML

<div class="logo"></div>

CSS

.logo {
  background-color: red;
  -webkit-mask: url(logo.svg) no-repeat center;
  mask: url(logo.svg) no-repeat center;
}

JSFiddle: https://jsfiddle.net/KuhlTime/2j8exgcb/
MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/mask

Please check whether your browser supports this feature: https://caniuse.com/#search=mask

So for anything but internal website unusable.

89% global support as of 29th May 2016.

This is an amazing solution for situations like the one described in here, where using anything other than data uris in css is a bit of a pain. Thanks!

its not working. it says mask is an invalid property value. i am testing this in chrome.

This works great! I added <img src="logo.svg" style="opacity:0" /> inside the div for correct div dimensions.

R

Rowe Morehouse

If your goal is just to change the color of the logo, and you don't necessarily NEED to use CSS, then don't use javascript or jquery as was suggested by some previous answers.

To precisely answer the original question, just:

Open your logo.svg in a text editor. look for fill: #fff and replace it with fill: #000

For example, your logo.svg might look like this when opened in a text editor:

<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
  <path d="M0 0h24v24H0z" fill="none"/>
  <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" fill="#fff"/>
</svg>

... just change the fill and save.

... and if there is no "fill", you can just add it to the path or circle items like <path fill="#777777" d="m129.774,74.409c-5.523,....

what if my logo has one color on header and another color on footer?

you can use also the fill="currentColor" then use the color on the parent element css-tricks.com/cascading-svg-fill-color

This is obviously possible and not really a helpful answer.

@Timmmm The currentColor way is very good actually.

F

Feri

Try pure CSS:

.logo-img {
  // to black
  filter: invert(1);
  // or to blue
  // filter: invert(1) sepia(1) saturate(5) hue-rotate(175deg);
}

more info in this article https://blog.union.io/code/2017/08/10/img-svg-fill/

Was getting a different color on Edge than on other browsers with one of my attempts recently.

This works in the most browser but i had some issues with IOS-Safari browser.

How to find the values of all four for a given colour code?

This works. To generate the filter using color code codepen.io/sosuke/pen/…

@funky-nd no, and i've never seen a performance problem due to css tbh.

n

northamerican

If you want a dynamic color, do not want to use javascript and do not want an inline SVG, use a CSS variable. Works in Chrome, Firefox and Safari. edit: and Edge

<svg>
    <use href="logo.svg" style="--color_fill: #000;"></use>
</svg>

In your SVG, replace any instances of style="fill: #000" with style="fill: var(--color_fill)".

Seems deprecated in SVG 2

@northamerican - links to other stackoverflow answers as "proofs" are irrelevant. anybody can write anything on this platform. MDN: "This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped"

It seems that xlink:href is deprecated in favor of href. So this may still work.

@BenjaminIntal href doesn't seem to work for me in chrome

Looks promising but, alas it does not load the picture. There is no error message in the console either. I'm using Firefox 78.4 esr.

W

Waruyama

You will first have to inject the SVG into the HTML DOM.

There is an open source library called SVGInject that does this for you. It uses the onload attribute to trigger the injection.

Here is a minimal example using SVGInject:

<html>
  <head>
    <script src="svg-inject.min.js"></script>
  </head>
  <body>
    <img src="image.svg" onload="SVGInject(this)" />
  </body>
</html>

After the image is loaded the onload="SVGInject(this) will trigger the injection and the <img> element will be replaced by the contents of the SVG file provided in the src attribute.

It solves several issues with SVG injection:

SVGs can be hidden until injection has finished. This is important if a style is already applied during load time, which would otherwise cause a brief "unstyled content flash". The elements inject themselves automatically. If you add SVGs dynamically, you don't have to worry about calling the injection function again. A random string is added to each ID in the SVG to avoid having the same ID multiple times in the document if an SVG is injected more than once.

SVGInject is plain Javascript and works with all browsers that support SVG.

Disclaimer: I am the co-author of SVGInject

This is the most straightforward answer. I tested it in Chrome, Firefox and Edge and it works perfectly.

It's a valid solution, but I think "the most straightforward" is a big stretch.

J

Jehad Ahmad Jaghoub

I suggest to select your color , and go to this pen https://codepen.io/sosuke/pen/Pjoqqp it will convert HEX to css filter eg:#64D7D6

equal

filter: invert(88%) sepia(21%) saturate(935%) hue-rotate(123deg) brightness(85%) contrast(97%);

the final snippet

.filterit{ width:270px; filter: invert(88%) sepia(21%) saturate(935%) hue-rotate(123deg) brightness(85%) contrast(97%); }

This really helped in a situation where I couldn't change the markup.

Results are almost never what I want even when using brightness(0) saturate(100%) so while lots of work was put into this, result is FAR from what it should be.

@e11world the SVG file shall not have color itself be sure about this

I just wanted to invert in my dark theme and this was exactly what I wanted. Thanks

M

Modesto

Edit your SVG file, add fill="currentColor" to svg tag and make sure to remove any other fill property from the file.

For example:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 139.435269383854" id="img" fill="currentColor">...
</svg>

Note that currentColor is a keyword (not a fixed color in use).

After that, you can change the color using CSS, by setting the color property of the element or from it's parent.

Example:

.div-with-svg-inside {
    color: red;
}

I forgot to say, you must insert the SVG this way:

      <svg>
        <use xlink:href='/assets/file.svg#img'></use>
      </svg>

Note that #img is the id of the svg tag inside svg file.

Another way of doing it: https://css-tricks.com/cascading-svg-fill-color/

xlink:href is a deprecated feature and should not be used developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href

Need to change the fill: red instead of a color CSS property.

C

Community

This answer is based on answer https://stackoverflow.com/a/24933495/3890888 but with a plain JavaScript version of the script used there.

You need to make the SVG to be an inline SVG. You can make use of this script, by adding a class svg to the image:

/*
 * Replace all SVG images with inline SVG
 */
document.querySelectorAll('img.svg').forEach(function(img){
    var imgID = img.id;
    var imgClass = img.className;
    var imgURL = img.src;

    fetch(imgURL).then(function(response) {
        return response.text();
    }).then(function(text){

        var parser = new DOMParser();
        var xmlDoc = parser.parseFromString(text, "text/xml");

        // Get the SVG tag, ignore the rest
        var svg = xmlDoc.getElementsByTagName('svg')[0];

        // Add replaced image's ID to the new SVG
        if(typeof imgID !== 'undefined') {
            svg.setAttribute('id', imgID);
        }
        // Add replaced image's classes to the new SVG
        if(typeof imgClass !== 'undefined') {
            svg.setAttribute('class', imgClass+' replaced-svg');
        }

        // Remove any invalid XML tags as per http://validator.w3.org
        svg.removeAttribute('xmlns:a');

        // Check if the viewport is set, if the viewport is not set the SVG wont't scale.
        if(!svg.getAttribute('viewBox') && svg.getAttribute('height') && svg.getAttribute('width')) {
            svg.setAttribute('viewBox', '0 0 ' + svg.getAttribute('height') + ' ' + svg.getAttribute('width'))
        }

        // Replace image with new SVG
        img.parentNode.replaceChild(svg, img);

    });

});

And then, now if you do:

.logo-img path {
  fill: #000;
}

Or may be:

.logo-img path {
  background-color: #000;
}

JSFiddle: http://jsfiddle.net/erxu0dzz/1/

Great.. works. in addition if our page have multiple svgs then we will need to put fetch block into the IIFE.

Great! Works well with ES6. If you don't care about IE 9 you can even use: parser.parseFromString(text, "image/svg+xml");

Doesn't work in a UIWebView on iOS 9.3.5. I think it might be due to the use of fetch which was added to Safari in 10.1 (developer.mozilla.org/en-US/docs/Web/API/Fetch_API). jQuery version above does work.

J

JasperZelf

Use filters to transform to any color.

I recently found this solution, and hope somebody might be able to use it. Since the solution uses filters, it can be used with any type of image. Not just svg.

If you have a single-color image that you just want to change the color of, you can do this with the help of some filters. It works on multicolor images as well of course, but you can't target a specific color. Only the whole image.

The filters came from the script proposed in How to transform black into any given color using only CSS filters If you want to change white to any color, you can adjust the invert value in each filter.

.startAsBlack{ display: inline-block; width: 50px; height: 50px; background: black; } .black-green{ filter: invert(43%) sepia(96%) saturate(1237%) hue-rotate(88deg) brightness(128%) contrast(119%); } .black-red{ filter: invert(37%) sepia(93%) saturate(7471%) hue-rotate(356deg) brightness(91%) contrast(135%); } .black-blue{ filter: invert(12%) sepia(83%) saturate(5841%) hue-rotate(244deg) brightness(87%) contrast(153%); } .black-purple{ filter: invert(18%) sepia(98%) saturate(2657%) hue-rotate(289deg) brightness(121%) contrast(140%); } Black to any color:

This filter works! If you have HEX color and want to generate filter color from it, use the CSS filter generator from Codepen. The generated filter color works for colors which are initially black. If you have a color which is initially white, you can increase brightness of generated filter color to achieve target color.

g

gringo

Why not create a webfont with your svg image or images, import the webfont in the css and then just change the color of the glyph using the css color attribute? No javascript needed

If your svg has several elements of different colors, this solution becomes very hacky (several elements interposed).

@kakaja This is a solution only for vector images that have 1 color in them. see bpulecio's answer for more details

Because icon is not text. Fonts are for text. Svgs are for icons.

@LazarLjubenović - technically text is made of characters which are symbols, and icons are also symbols, so this is why many do not have problem using icon-fonts. it's just like creating "another" textual language. Mandarin uses "icons" and not letters also, it's not uncommon in humanity to use icons as "text"

while this sounds as an interesting solution, I really recommend to elaborate the answer into something more like "how to" instead of "why not"

s

sleepDrifter

The answer from @Praveen is solid.

I couldn't get it to respond in my work, so I made a jquery hover function for it.

CSS

.svg path {
   transition:0.3s all !important;
}

JS / JQuery

// code from above wrapped into a function
replaceSVG();

// hover function
// hover over an element, and find the SVG that you want to change
$('.element').hover(function() {
    var el = $(this);
    var svg = el.find('svg path');
    svg.attr('fill', '#CCC');
}, function() {
    var el = $(this);
    var svg = el.find('svg path');
    svg.attr('fill', '#3A3A3A');
});

wouldn't this only work if the SVG was inline to begin with?

Yes—but if you're working with many SVG files or updating them regularly, it's a pain to manage.

H

Hamza Jamal

Simple..

You can use this code:

<svg class="logo">
  <use xlink:href="../../static/icons/logo.svg#Capa_1"></use>
</svg>

First specify the path of svg and then write it's ID, In this case "Capa_1". You can get the ID of svg by opening it in any editor.

In css:

.logo {
  fill: red;
}

kabrice, You can use this code codepen.io/hmzajmal/pen/ZEGvWYa

this should be marked as a solution. Its really important to add the id (#...) of the svg you are linking.

tbh I cant find the id of the svg

w

wcb1

If you are just switching the image between the real color and the black-and-white, you can set one selector as:

{filter:none;}

and another as:

{filter:grayscale(100%);}

B

Benjamin

Since SVG is basically code, you need just contents. I used PHP to obtain content, but you can use whatever you want.

<?php
$content    = file_get_contents($pathToSVG);
?>

Then, I've printed content "as is" inside a div container

<div class="fill-class"><?php echo $content;?></div>

To finnaly set rule to container's SVG childs on CSS

.fill-class > svg { 
    fill: orange;
}

I got this results with a material icon SVG:

Mozilla Firefox 59.0.2 (64-bit) Linux

https://i.stack.imgur.com/46V0s.jpg

Google Chrome66.0.3359.181 (Build oficial) (64 bits) Linux

https://i.stack.imgur.com/432FP.jpg

Opera 53.0.2907.37 Linux

https://i.stack.imgur.com/JUJAe.jpg

My reason for not doing this is that this prevents the browser to cache the SVG. The alternative is to use an SVG injector mentioned in a few other answers here. The SVG file will still be cached by the browser, and the injected SVG can still be styled with CSS. But I don't downvote you.

I understand, but anyway, cache is not mentioned. Best answer have JavaScript code that can be reload (or not) everytime by header expire manipulation or force a hash after filename link.Thanks for do not downvote, but I still believing that my answer solves changing an SVG using CSS fill attribute.

b

bpulecio

To expand on @gringo answer, the Javascript method described in other answers works, but requires the user to download unnecessary image files, and IMO, it bloats your code.

I think a better approach would be to to migrate all 1-color vector graphics to a webfont file. I've used Fort Awesome in the past, and it works great to combine your custom icons/images in SVG format, along with any 3rd party icons you may be using (Font Awesome, Bootstrap icons, etc.) into a single webfont file the user has to download. You can also customize it, so you only include the 3rd party icons you're using. This reduces the number of requests the page has to make, and you're overall page weight, especially if you're already including any 3rd party icons libraries.

If you prefer a more dev oriented option, you could Google "npm svg webfont", and use one of the node modules that's most appropriate for your environment.

Once, you've done either of those two options, then you could easily change the color via CSS, and most likely, you've sped up your site in the process.

You should give SVG sprites a try. In my experience, web-fonts have random issues between browser releases. Try this: fontastic.me - but use the SVG sprite versions - and see what you think. : )

F

Flavien Volken

The main problem in your case is that you are importing the svg from an <img> tag which will hide the SVG structure.

You need to use the <svg> tag in conjunction with the <use> to get the desired effect. To make it work, you need to give an id to the path you want to use in the SVG file <path id='myName'...> to then be able to retrieve them from the <use xlink:href="#myName"/> tag. Try the snipped below.

.icon { display: inline-block; width: 2em; height: 2em; transition: .5s; fill: currentColor; stroke-width: 5; } .icon:hover { fill: rgba(255,255,255,0); stroke: black; stroke-width: 2; } .red { color: red; } .blue { color: blue; }

Note that you can put any URL before the fragment # if you want to load the SVG from an external source (and not embed it into your HTML). Also, usually you do not specify the fill into the CSS. It's better to consider using fill:"currentColor" within the SVG itself. The corresponding element's CSS color value will then be used in place.

F

Floris

This might be helpful for people using PHP in combination with .svg images that they want to manipulate with CSS.

You can't overwrite properties inside a img tag with CSS. But when the svg source code is embedded in the HTML you surely can. I like to resolve this issue with a require_once function where I include a .svg.php file. It's like importing an image but you can still overwrite styles with CSS!

First include the svg file:

<?php require_once( '/assets/images/my-icon.svg.php' ); ?>

And it includes this icon for example:

<svg xmlns="http://www.w3.org/2000/svg" width="20.666" height="59.084" viewBox="0 0 20.666 59.084"><g transform="translate(-639.749 -3139)"><path d="M648.536,3173.876c0-2.875-1.725-3.8-3.471-3.8-1.683,0-3.49.9-3.49,3.8,0,3,1.786,3.8,3.49,3.8C646.811,3177.676,648.536,3176.769,648.536,3173.876Zm-3.471,2.341c-.883,0-1.437-.513-1.437-2.341,0-1.971.615-2.381,1.437-2.381.862,0,1.438.349,1.438,2.381,0,1.907-.616,2.339-1.438,2.339Z" fill="#142312"/><path d="M653.471,3170.076a1.565,1.565,0,0,0-1.416.9l-6.558,13.888h1.2a1.565,1.565,0,0,0,1.416-.9l6.559-13.887Z" fill="#142312"/><path d="M655.107,3177.263c-1.684,0-3.471.9-3.471,3.8,0,3,1.766,3.8,3.471,3.8,1.745,0,3.49-.9,3.49-3.8C658.6,3178.186,656.851,3177.263,655.107,3177.263Zm0,6.139c-.884,0-1.438-.514-1.438-2.34,0-1.972.617-2.381,1.438-2.381.862,0,1.437.349,1.437,2.381,0,1.909-.616,2.34-1.437,2.34Z" fill="#142312"/><path d="M656.263,3159.023l-1.49-14.063a1.35,1.35,0,0,0,.329-.293,1.319,1.319,0,0,0,.268-1.123l-.753-3.49a1.328,1.328,0,0,0-1.306-1.054h-6.448a1.336,1.336,0,0,0-1.311,1.068l-.71,3.493a1.344,1.344,0,0,0,.276,1.112,1.532,1.532,0,0,0,.283.262l-1.489,14.087c-1.7,1.727-4.153,4.871-4.153,8.638v28.924a1.339,1.339,0,0,0,1.168,1.49,1.357,1.357,0,0,0,.17.01h17.981a1.366,1.366,0,0,0,1.337-1.366v-29.059C660.414,3163.893,657.963,3160.749,656.263,3159.023Zm-8.307-17.349h4.274l.176.815H647.79Zm9.785,43.634v10.1H642.434v-17.253a4.728,4.728,0,0,1-2.028-4.284,4.661,4.661,0,0,1,2.028-4.215v-2c0-3.162,2.581-5.986,3.687-7.059a1.356,1.356,0,0,0,.4-.819l1.542-14.614H652.1l1.545,14.618a1.362,1.362,0,0,0,.4.819c1.109,1.072,3.688,3.9,3.688,7.059v9.153a5.457,5.457,0,0,1,0,8.5Z" fill="#142312"/></g></svg>

Now we can easily change the fill color like this with CSS:

svg path {
  fill: blue;
}

I first tried to solve this problem with file_get_contents() but the solution above is much faster.

What about require_once() is faster than file_get_contents()? Because it's a purely local call?

Yes. As far as I know file_get_contents() does a GET request and require_once includes it locally.

H

Hamza Jamal

open the svg icon in your code editor and add a class after the path tag:

<path class'colorToChange' ...

You can add class to svg and change the color like this:

codepen

n

nechemya ungar

Know this is an old question but recently we came across the same issue, and we solved it from the server side. This is a php specific answer but I am positive that other envs have something similar. instead of using the img tag you render the svg as svg from the get-go.

public static function print_svg($file){
    $iconfile = new \DOMDocument();
    $iconfile->load($file);
    $tag = $iconfile->saveHTML($iconfile->getElementsByTagName('svg')[0]);
    return $tag;
}

now when you render the file you will get complete inline svg

S

Servus

For me, my svgs looked different when having them as img and svg. So my solution converts the img to csv, changes styles internally and back to img (although it requires a bit more work), I believe "blob" also has better compatibility than the upvoted answer using "mask".

  let img = yourimgs[0];
  if (img.src.includes(".svg")) {
    var ajax = new XMLHttpRequest();
    ajax.open("GET", img.src, true);
    ajax.send();
    ajax.onload = function (e) {
     
      svg = e.target.responseText;

     
      svgText = "";
      //change your svg-string as youd like, for example
      // replacing the hex color between "{fill:" and ";"
      idx = svg.indexOf("{fill:");
      substr = svg.substr(idx + 6);
      str1 = svg.substr(0, idx + 6);
      str2 = substr.substr(substr.indexOf(";"));
      svgText = str1 + "#ff0000" + str2;
      

      let blob = new Blob([svgText], { type: "image/svg+xml" });
      let url = URL.createObjectURL(blob);
      let image = document.createElement("img");
      image.src = url;
      image.addEventListener("load", () => URL.revokeObjectURL(url), {
        once: true,
      });
      img.replaceWith(image);
    };
  }

H

Hans

I wanted to change specific paths and/or colors only and even colorize paths differently. Also, in my case some CSS was applied to the IMG-tag directly, hence I wanted to let it be original IMG-element to not mess around with positioning and alignment.

Thanks to inspiration from this answer: https://stackoverflow.com/a/43015413/1444589, this is what worked for me:

let img = document.querySelector('img[class^="YourClassName"]');
let imgURL = img.src;

fetch(imgURL)
  .then(response => response.text())
  .then(text => {
    let parser = new DOMParser();
    let xmlDoc = parser.parseFromString(text, 'text/xml');
    let svg = xmlDoc.getElementsByTagName('svg')[0];
    let paths = xmlDoc.getElementsByTagName('path');

    // access individual path elements directly
    let leftShape = paths[0];
    leftShape.setAttribute('fill', '#4F4F4F');

    // or find specific color
    const pathsArr = Array.from(paths);
    let skirtShape = pathsArr.find(path => path.getAttribute('fill') === '#F038A5');
    skirtShape.setAttribute('fill', '#0078D6');

    // Replace old SVG with colorized SVG
    // positioning and alignment is left untouched
    let base64Str = btoa(new XMLSerializer().serializeToString(svg));
    img.src = 'data:image/svg+xml;base64, ' + base64Str;
  });

R

Re9iNee

for that matters you have to use your SVG as an inline HTML.

say here's your logo.svg code (when you open it on textEditor):

Logo.SVG

<svg width="139" height="100" xmlns="http://www.w3.org/2000/svg">
    <!-- Note that I've Added Class Attribute 'logo-img' Here -->
    <g transform="translate(-22 -45)" fill="none" fill-rule="evenodd">
        <path
            d="M158.023 48.118a7.625 7.625 0 01-.266 10.78l-88.11 83.875a7.625 7.625 0 01-10.995-.5l-33.89-38.712a7.625 7.625 0 0111.475-10.045l28.653 32.73 82.353-78.394a7.625 7.625 0 0110.78.266z"
            fill="#00000" />
    </g>
</svg>

add your desired Class/ID to it (i've added 'logo-img'):

Edited Svg

<svg class="logo-img" width="139" height="100" xmlns="http://www.w3.org/2000/svg">
    <!-- Note that I've Added Class Attribute 'logo-img' Here -->
    ...
</svg>

Now apply Your Css Rules:

CSS

.logo-img path {
   fill: #000;
}

Pro

With this way you can animate on user's actions (hover, selected,...)

Con

Your HTML File would be a mess.

Heres a Stack Snippet

Document

J

Juan Manuel Linares

Why not just using CSS's filter property to manipulate the color on :hover or whatever other state? I found it works over SVG images into img tags. At least, it's almost fully supported in 2020. It seams to me the simpliest solution. The only caveat is having to tweak the filter properties in order to find the target color. But you have also this very useful tool.

B

BBaysinger

If your shape(s) are always one solid color and you have more than a couple, you can use Fontello and make a custom icon font with a whole series of your own custom SVG shapes. Then you can set/animate the size and color of all of them with CSS alone.

For all the possible use cases for this question, this is an essential paradigm to consider. I've used it in many projects. In any case, if you haven't heard of Fontello, you need to find out about it. If you know of a similar solution that is better, I would love to know.

Possible downfalls:

Icon/shape fonts are known to mess with screen readers, so that may take some handling. Fontello can be finicky with importing shapes, and it may take some trial and error with authoring and exporting them. Avoid any and all grouping, and use only single non-nested compound shapes.

J

Jayant Patil

Directly to svg fill css will not work you can use as below

<style>
svg path {
    fill: red;
}
</style>
<svg xmlns="http://www.w3.org/2000/svg" width="20.666" height="59.084" viewBox="0 0 20.666 59.084"><g transform="translate(-639.749 -3139)"><path d="M648.536,3173.876c0-2.875-1.725-3.8-3.471-3.8-1.683,0-3.49.9-3.49,3.8,0,3,1.786,3.8,3.49,3.8C646.811,3177.676,648.536,3176.769,648.536,3173.876Zm-3.471,2.341c-.883,0-1.437-.513-1.437-2.341,0-1.971.615-2.381,1.437-2.381.862,0,1.438.349,1.438,2.381,0,1.907-.616,2.339-1.438,2.339Z" fill="#142312"/><path d="M653.471,3170.076a1.565,1.565,0,0,0-1.416.9l-6.558,13.888h1.2a1.565,1.565,0,0,0,1.416-.9l6.559-13.887Z" fill="#142312"/><path d="M655.107,3177.263c-1.684,0-3.471.9-3.471,3.8,0,3,1.766,3.8,3.471,3.8,1.745,0,3.49-.9,3.49-3.8C658.6,3178.186,656.851,3177.263,655.107,3177.263Zm0,6.139c-.884,0-1.438-.514-1.438-2.34,0-1.972.617-2.381,1.438-2.381.862,0,1.437.349,1.437,2.381,0,1.909-.616,2.34-1.437,2.34Z" fill="#142312"/><path d="M656.263,3159.023l-1.49-14.063a1.35,1.35,0,0,0,.329-.293,1.319,1.319,0,0,0,.268-1.123l-.753-3.49a1.328,1.328,0,0,0-1.306-1.054h-6.448a1.336,1.336,0,0,0-1.311,1.068l-.71,3.493a1.344,1.344,0,0,0,.276,1.112,1.532,1.532,0,0,0,.283.262l-1.489,14.087c-1.7,1.727-4.153,4.871-4.153,8.638v28.924a1.339,1.339,0,0,0,1.168,1.49,1.357,1.357,0,0,0,.17.01h17.981a1.366,1.366,0,0,0,1.337-1.366v-29.059C660.414,3163.893,657.963,3160.749,656.263,3159.023Zm-8.307-17.349h4.274l.176.815H647.79Zm9.785,43.634v10.1H642.434v-17.253a4.728,4.728,0,0,1-2.028-4.284,4.661,4.661,0,0,1,2.028-4.215v-2c0-3.162,2.581-5.986,3.687-7.059a1.356,1.356,0,0,0,.4-.819l1.542-14.614H652.1l1.545,14.618a1.362,1.362,0,0,0,.4.819c1.109,1.072,3.688,3.9,3.688,7.059v9.153a5.457,5.457,0,0,1,0,8.5Z" fill="#142312"/></g></svg>

This worked for me

img src SVG changing the styles with CSS

Follow WeChat

Want to stay one step ahead of the latest teleworks?

相似问题

Platform

Support

Contact US