[css] CSS의 인라인 SVG

여전히 어려움을 겪고있는 사람들을 위해 모든 최신 브라우저 IE11 이상 에서이 작업을 수행 할 수있었습니다.

base64는 SASS를 사용하여 주어진 색상을 기반으로 SVG 아이콘을 생성하기를 원했기 때문에 선택의 여지가 없었습니다. 예를 들어 : @include svg_icon(heart, #FF0000);이렇게하면 어떤 색상 으로든 특정 아이콘을 만들 수 있으며 CSS에 SVG 모양을 한 번만 포함하면됩니다. (base64를 사용하려면 사용하려는 모든 단일 색상으로 SVG를 포함해야합니다)

알아야 할 세 가지가 있습니다.

1. SVG
   URL 인코딩 다른 사람들이 제안했듯이 IE11에서 작동하려면 전체 SVG 문자열을 URL 인코딩해야합니다. 필자의 경우는 다음과 같은 분야의 색상 값을 왼쪽 fill="#00FF00"과 stroke="#FF0000"와 SASS 변수로 대체 fill="#{$color-rgb}"이것들이 내가 원하는 색상으로 교체 할 수 있습니다. 온라인 변환기 를 사용하여 나머지 문자열을 URL 인코딩 할 수 있습니다 . 다음과 같은 SVG 문자열로 끝납니다.

   % 3Csvg % 20xmlns % 3D % 27http % 3A % 2F % 2Fwww.w3.org % 2F2000 % 2Fsvg % 27 % 20viewBox % 3D % 270 % 200 % 20494.572 % 20494.572 % 27 % 20width % 3D % 27512 % 27 % 20height % 3D % 27512 % 27 % 3E % 0A % 20 % 20 % 3Cpath % 20d % 3D % 27M257.063 % 200C127.136 % 200 % 2021.808 % 20105.33 % 2021.808 % 20235.266c0 % 2041.012 % 2010.535 % 2079.541 % 2028.973 % 20113.104L3.825 % 20464.586c345 % 2012.797 % 2041.813 % 2012.797 % 2015.467 % 200 % 2029.872-4.721 % 2041.813-12.797v158.184z % 27 % 20fill % 3D % 27 # {$ color-rgb} % 27 % 2F % 3E % 3C % 2Fsvg % 3E

2. 데이터 URL에서 UTF8 문자 세트 생략 데이터 URL을 작성할 때 IE11에서 작동하려면 문자 세트를 생략해야합니다.

   NOT background-image : url (data : image / svg + xml; utf-8, % 3Csvg % 2 ….)
   그러나 배경 이미지 : url (data : image / svg + xml, % 3Csvg % 2 … .)

3. RGB () INSTEAD OF HEX 색상 사용 Firefox는 SVG 코드에서 #을 좋아하지 않습니다. 따라서 색상 16 진수 값을 RGB 값으로 바꿔야합니다.

   NOT = “=”FF0000 “
   BUT fill = “rgb (255,0,0)”

필자의 경우 SASS를 사용하여 주어진 16 진수를 유효한 rgb 값으로 변환합니다. 주석에서 지적했듯이 RGB 문자열도 URL 인코딩하는 것이 가장 좋습니다 (따라서 쉼표는 % 2C가됩니다)

@mixin svg_icon($id, $color) {
   $color-rgb: "rgb(" + red($color) + "%2C" + green($color) + "%2C" + blue($color) + ")";
   @if $id == heart {
      background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20494.572%20494.572%27%20width%3D%27512%27%20height%3D%27512%27%3E%0A%20%20%3Cpath%20d%3D%27M257.063%200C127.136%200%2021.808%20105.33%2021.808%20235.266c0%204%27%20fill%3D%27#{$color-rgb}%27%2F%3E%3C%2Fsvg%3E');
   }
}

나는 이것이 매우 복잡한 SVG (인라인 SVG는 결코 그런 경우)에 대한 최상의 솔루션이 아닐 수도 있지만 몇 가지 색상의 평면 아이콘의 경우 실제로 훌륭하게 작동합니다.

전체 스프라이트 비트 맵을 제외하고 CSS에서 인라인 SVG로 대체 할 수 있었으며 압축 후 약 25kb로 나타났습니다. 따라서 CSS 파일을 부 풀리지 않고 사이트에서 수행해야 할 요청의 양을 제한하는 좋은 방법입니다.

답변

echo "background: transparent url('data:image/svg+xml;base64,"$(openssl base64 < path/to/file.svg)"') no-repeat center center;"

@function svg-inline($string){
  $result: str-replace($string, "<svg", "<svg xmlns='http://www.w3.org/2000/svg'");
  $result: str-replace($result, '%', '%25');
  $result: str-replace($result, '"', '%22');
  $result: str-replace($result, "'", '%27');
  $result: str-replace($result, ' ', '%20');
  $result: str-replace($result, '<', '%3C');
  $result: str-replace($result, '>', '%3E');
  @return "data:image/svg+xml;utf8," + $result;
}

$mySVG: svg-inline("<svg>...</svg>");

html {
  height: 100vh;
  background: url($mySVG) 50% no-repeat;
}

.test {
  /*  background-image: url('#glyph');
    background-size:100% 100%;*/
    filter: url(#image);
    height:100px;
    width:100px;
}
.test:before {
   display:block;
   content:'';
   color:transparent;
}
.test2{
  width:100px;
  height:100px;
}
.test2:before {
   display:block;
   content:'';
   color:transparent;
   filter: url(#image);
   height:100px;
   width:100px;
}

<svg style="height:0;width:0;" version="1.1" viewbox="0 0 100 100"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>
     <g id="glyph">
          <path id="heart" d="M100 34.976c0 8.434-3.635 16.019-9.423 21.274h0.048l-31.25 31.25c-3.125 3.125-6.25 6.25-9.375 6.25s-6.25-3.125-9.375-6.25l-31.202-31.25c-5.788-5.255-9.423-12.84-9.423-21.274 0-15.865 12.861-28.726 28.726-28.726 8.434 0 16.019 3.635 21.274 9.423 5.255-5.788 12.84-9.423 21.274-9.423 15.865 0 28.726 12.861 28.726 28.726z" fill="crimson"/>
     </g>
    <svg id="resized-glyph"  x="0%" y="0%" width="24" height="24" viewBox="0 0 100 100" class="icon shape-codepen">
      <use xlink:href="#glyph"></use>
    </svg>
     <filter id="image">
       <feImage xlink:href="#resized-glyph" x="0%" y="0%" width="100%" height="100%" result="res"/>
       <feComposite operator="over" in="res" in2="SourceGraphic"/>
    </filter>
 </defs>
</svg>
<div class="test">
</div>
<div class="test2">
</div>

var container = document.querySelector(".container");
var svg = document.querySelector("svg");
var svgText = (new XMLSerializer()).serializeToString(svg);
container.style.backgroundImage = `url(data:image/svg+xml;utf8,${encodeURIComponent(svgText)})`;

.container{
  height:50px;
  width:250px;
  display:block;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}

<svg  height="100" width="500" xmlns="http://www.w3.org/2000/svg">
    <ellipse cx="240" cy="50" rx="220" ry="30" style="fill:yellow" />
</svg>
<div class="container"></div>