How to manipulate svg with css?

I Am trying to manipulate svg images with css, and I haven't really had the smallest success, I guess that it's some detail that I'm not already doing that on the internet there are many examples of this that I'm trying and I imagine that is because it works for them all, but I have not been able or placing the svg in the html directly, or through an img tag or the css in the html or svg-both internally and externally, of a truth I could not, if anyone knows I appreciate it. Below I leave 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 neither have I been able to do that. I put the class="cuadrado" attribute manually, and since they can be fixed 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 SVG image folder, and as you will 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" file.html "is in the main folder, i.e." img " is a subfolder. I hope you help me.

 3
Author: Ricardo Gabriel, 2016-08-22
Source

4 answers

You are very close, so as not to modify your SVG add the unfortunate !important to overwrite 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:

  • do not apply any (inline) style to the SVG as such and do it entirely from your stylesheet.
  • create an SVG sprite to be able to group and reference them all in the same file.

Edit to use external stylesheets:

Normally for using external stylesheets, I usually Group the SVGs into a single file and reference them there:

Pictures.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
Author: Shaz, 2016-08-22 20:58:04

What I would do would be to convert the SVG into a font that are much easier to modify with css.

Check out this chrome Extension

Https://icomoon.io/app/#/select

 1
Author: ezain, 2016-08-23 18:06:20

Cre that is for using the external svg, being external its parts are not part of the DOM and that is why the css can not readlossi short and paste the svg in the html works, I am also looking at how to solve that using an external svg

 1
Author: Daniel Hincapie, 2016-08-29 02:13:44

You can change the attributes within the SVG file, without having to have a CSS. For this you have to insert the image inside the page loading it from a directory that you have in the application. The code to put the serious image: 

<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 inside the SVG to change the color.

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

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

You can rename it if you want by editing this field and then press Apply which is down on the window. Do not forget to record the changes in the image.

This is the name what you want to change, remember it to be able to search 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 serves you.

Greetings

 0
Author: PabloB, 2017-02-12 21:11:57