Home / Questions / 21327
Accepted
Ricardo Gabriel
Asked: 2020-08-23 11:10:14 +0800 CST 2020-08-23 11:10:14 +0800 CST

How to manipulate svg with css?

  • 772

I'm trying to manipulate svg images with css and I haven't really had the slightest success, I guess it's some detail that I'm not doing since there are many examples of this on the internet that I'm trying and I imagine it's because it works for everyone, but I have not been able to place the svg in the html directly, nor through an img tag, nor with the css in the html or in the svg both internally and externally, I really have not been able to, if someone knows how to do it I would appreciate it . Here is my code:

vector.html

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>Vector</title>
	<style type="text/css">
		*
		{
			margin: 0px;
			padding: 0px;
		}

		html, body
		{
			height: 100%;
		}

		body
		{
			background-color: red;
		}
	</style>
</head>
<body>
	<img src="img/drawing.svg" alt="svg">
</body>
</html>

drawing.svg - The file was created with inkscape, I just want to change the color of the box for now, but I couldn't even do that. class="cuadrado"I place the attribute manually, and as you can see in the second line of the code, I am inserting the css in the svg image externally.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="epa.css"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   id="svg2"
   viewBox="0 0 744.09448819 1052.3622047"
   height="297mm"
   width="210mm">
  <defs
     id="defs4" />
  <metadata
     id="metadata7">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     id="layer1">
    <rect
       y="233.69289"
       x="102.70579"
       height="270.90512"
       width="315.55981"
       id="rect3336"
       style="fill:#00ff00;fill-opacity:1"
       class="cuadrado"/>
  </g>
</svg>

epa.css - This file is in the same folder as the svg image, and as you can see it is very, very basic.

#rect3336
{
  fill: blue;
  fill-opacity:1;
}

The "svg" file and the "css" file are in a folder called "img", the "vector.html" file is in the main folder, ie "img" is a subfolder. I hope you help me.

html

4 Answers

  1. Best Answer

    You are very close, in order not to modify your SVG, add the unlucky !importantone to it so that it overrides the inline style:

    #rect3336 {
   fill:#ff0000 !important;
  }
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="epa.css"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   id="svg2"
   viewBox="0 0 744.09448819 1052.3622047"
   height="297mm"
   width="210mm">
  <defs
     id="defs4" />
  <metadata
     id="metadata7">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     id="layer1">
    <rect
       y="233.69289"
       x="102.70579"
       height="270.90512"
       width="315.55981"
       id="rect3336"
       style="fill:#00ff00;fill-opacity:1"
       class="cuadrado"/>
  </g>
</svg>

    Depending on how you want to handle your SVG you could do it another way:

    • Don't apply any (inline) styling to the SVG itself and do it entirely from your style sheet.
    • Create an SVG sprite so you can group and reference them all in the same file.

    Edit to use external style sheets:

    Normally to use external style sheets, I usually group the svg in a single file and reference them there:

    images.svg

    <?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <symbol id="cuadrado" viewBox="0 0 744.09448819 1052.3622047" height="297mm" width="210mm">
      <rect
        y="233.69289"
        x="102.70579"
        height="270.90512"
        width="315.55981"/>
    </symbol>
    <!-- otros svg -->
  </svg>

    index.html

    <!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Vector</title>
    <link href="estilo.css" rel="stylesheet">
</head>
<body>
    <svg class="imagen1">
      <use xlink:href="imagenes.svg#cuadrado"></use>
    </svg>
</body>
</html>

    style.css

    .imagen1 {
  fill: blue;
}
    • 4

  2. What I would do is convert the SVG to a font which is much easier to modify with css.

    check out this chrome extension

    https://icooon.io/app/#/select

    • 1

  3. I think it is because of using the external svg, being external its parts are not part of the DOM and that is why the css cannot read them if you cut and paste the svg in the html it works, I am also looking at how to solve that using an external svg

    • 1

  4. You can change the attributes within the SVG file, without the need for CSS. For this you have to insert the image into the page loading it from a directory that you have in the application. The code to put the image would be:

    <object id="diagrama" type="image/svg+xml" data="Imagen/Cavas Pedriel C.svg" style="border: medium ridge #C0C0C0; width: auto; height: 480px;"></object>

    Then you create a function where you look for the element within the SVG to change the color.

    To know what the element is called you can use Inkscape, load the SVG image, select the image, and ungroup all the elements (right click on the image -> Ungroup.

    Mark which is the one you want to change the property and press ctrl+shift+O, a new window will open on the screen where the properties of the element are, this is the name Id: patch458 for example.

    You can change the name if you want by editing this field and then pressing Apply at the bottom of the window. Don't forget to record the changes in the image.

    This is the name of what you want to change, remember it to be able to search for it in the application.

    On the page you create a function that you call to change the color, which would have:

     {
 var a = document.getElementById("diagrama");  // "diagrama" es el nombre del contenedor de la imagen en la pagina
       var svgDoc = a.contentDocument; //cargo el contenido de la imagen SVG
       temp = "patch458" ;  //nombre del elemento a cambiar
       var svgItem = svgDoc.getElementById(temp); //busco dentro de la imagen el Id que corresponde cargado en temp.
       svgItem.style.setProperty("fill", "red", "");// defino la propiedad fill del elemento seleccionado de color rojo
     }

    I hope it works for you.

    Cheers

    • 0