HTML CSS examples for SVG:Symbol
Using an SVG and Apply CSS for the same svg
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .Icon{<!-- www .j ava 2s . c om--> display:inline-block; fill:currentColor; width:200px; height:200px; } .Red{ fill:red; } .Blue{ fill:blue; } .I100{ height:100px; width:100px; } .I50{ height:50px; width:50px; } } </style> </head> <body> <div style="height:0;width:0;position:absolute;visibility:hidden;"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <symbol id="Icon" viewbox="0 0 512 512"> <title>Document</title> <path d="M4.344,2L261.063,466.25c-43.656,43.688-114.7,43.6-158.391,0L57.422,4c-43.672-43.625-43.672-114.75,0-158.375 l2.266-226.25c31.188-31.188,81.938-31.188,113.125,0l45.281,45.25c31.188,31.188,31.188,81.938,0,113.125l-181.031,181 c-31.203,31.25-81.953,31.188-113.141,0c-15.109-15.125-23.438-35.188-23.438-56.563c0.016-21.375,8.344-41.438,23.438-56.563 l181.016-181l22.625,22.625l-181.016,181c-9.047,9.063-14.063,21.125-14.063,33.938s5,24.875,14.063,33.938 c18.719,18.75,49.172,18.75,67.891,0l181.031-181c18.688-18.688,18.688-49.125,0-67.875L374.188,59 c-18.719-18.75-49.156-18.75-67.875,0L80.047,285.25c-31.203,31.25-31.188,81.938,0,113.125l45.25,45.25 c31.203,31.25,81.938,31.25,113.141,0l226.281-226.25L487.344,240z" /> </symbol> </svg> </div> <svg class="Icon"> <use xlink:href="#Icon" /> </svg> <svg class="Icon Red I100"> <use xlink:href="#Icon" /> </svg> <svg class="Icon Blue I50"> <use xlink:href="#Icon" /> </svg> </body> </html>