특정 이미지 아이콘에서 설정된 변수에 따라 아이콘의 색상이 변하는 기능을 구현하고자 한다.
기존 jpg, png등은 이미지파일을 미리준비해야 했지만 svg를 쓰면 아이콘의 색상을 바꾸는 것이 가능하다.
(그리고 아이콘의 모양을 실시간으로 변경하는 것 또한 가능은하다)
여기에 생성된 svg가 있다
var svg = '';
svg += "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n";
svg += "<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->\n";
svg += "<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\"\n";
svg += " y=\"0px\" viewBox=\"0 0 24.7 21.6\" style=\"enable-background:new 0 0 24.7 21.6;\" xml:space=\"preserve\">\n";
svg += "<style type=\"text/css\">\n";
svg += " .st0{fill:#" + color + ";}\n";
svg += " .st1{fill:#FFFFFF;}\n";
svg += "</style>\n";
svg += "<path class=\"st0\" d=\"M6.7,1.6L2.6,7.1H5c0.6,0,1,0.4,1,1V20h12.7V8.1c0-0.6,0.4-1,1-1h2.4l-4.1-5.5H6.7z\"/>\n";
svg += "<path class=\"st1\" d=\"M6.5,1.2L1.8,7.5H5c0.3,0,0.6,0.3,0.6,0.6v12.3h13.5V8.1c0-0.3,0.3-0.6,0.6-0.6h3.2l-4.7-6.3H6.5z M19.7,7.1\n";
svg += " c-0.6,0-1,0.4-1,1V20H6V8.1c0-0.6-0.4-1-1-1H2.6l4.1-5.5h11.4l4.1,5.5H19.7z\"/>\n";
svg += "<path d=\"M24.6,7.7l-5.6-7.5C18.9,0.1,18.8,0,18.6,0H6.2C6,0,5.8,0.1,5.7,0.2L0.1,7.7C0,7.9,0,8.1,0.1,8.3s0.3,0.3,0.5,0.3h3.8V21\n";
svg += " c0,0.3,0.3,0.6,0.6,0.6h14.7c0.3,0,0.6-0.3,0.6-0.6V8.7h3.8c0.2,0,0.4-0.1,0.5-0.3S24.8,7.9,24.6,7.7z M19.7,7.5\n";
svg += " c-0.3,0-0.6,0.3-0.6,0.6v12.3H5.6V8.1c0-0.3-0.3-0.6-0.6-0.6H1.8l4.7-6.3h11.8l4.7,6.3H19.7z\"/>\n";
svg += "</svg>\n";
이 svg는 실시간으로 생성되는 값이며 svg값을 <img src=에 적용하려고 한다.
src에 아래와 같이 적용해주면 된다.
"data:image/svg+xml;base64," + window.btoa(svg);
중요한 것은 svg의 소스를 base64로 변환해야 하며 btoa()가 base64로 변환해준다.
"data:image/svg+xml;base64," 이구문도 반드시 추가해야한다.