Коротко о том, как вставить на страницу SVG изображение и изменить его цвет через CSS.
Как изменить цвет SVG картинки в CSS
14.08.2018
Основная идея в том, что в файле svg доложен быть элемент с определенным ID, пример #my1
1.html (Download)
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<style type="text/css">
#my1{
fill: green;
}
</style>
<svg>
<use xlink:href="01.svg#my1"></use>
</svg>
</body>
</html>01.svg (Download)
<?xml version="1.0" encoding="iso-8859-1"?> <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"> <g id="my1"> <g> <path d="M497,123.271h-71.437V86.477c0-32.204-26.053-58.404-58.076-58.404H144.513c-32.023,0-58.076,26.2-58.076,58.404v36.796 H15c-8.284,0-15,6.716-15,15v61.563c0,8.284,6.716,15,15,15h17.735l6.456,191.327c0.707,20.955,9.343,40.525,24.315,55.108 c15.002,14.61,34.763,22.657,55.642,22.657h273.705c43.389,0,78.51-34.655,79.957-78.882l6.418-190.211H497 c8.284,0,15-6.716,15-15v-61.563C512,129.987,505.284,123.271,497,123.271z M116.437,86.477c0-15.662,12.595-28.404,28.076-28.404 h222.975c15.481,0,28.076,12.742,28.076,28.404v36.796H116.437V86.477z M442.826,404.049 c-0.915,27.969-22.866,49.878-49.974,49.878H119.147c-27.1,0-49.051-21.426-49.975-48.777L62.75,214.835h116.62 c6.703,27.336,31.277,47.672,60.496,47.672h32.27c20.928,0,51.317-20.315,59.939-47.672h117.137L442.826,404.049z M211.174,214.835h87.723c-7.459,10.246-20.505,17.672-26.762,17.672h-32.27C227.394,232.507,216.559,225.322,211.174,214.835z M482,184.835H30v-31.563h452V184.835z"/> </g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> </svg>