data uri scheme で背景画像にSVGを使用する方法

皆さん、こんにちは。

制作部の関です。

今回は「data uri scheme で背景画像にSVGを使用する方法」についてです。

data uri scheme で背景画像にSVGを使用する方法

基本的にはイラレなどで保存する際に出てくるsvgコードを、

データURIスキーム 変換サイトで検索したサイトに打ち込んで、コードを手に入れる流れになります。

<?xml version="1.0" encoding="UTF-8"?>
<svg id="_レイヤー_2" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 10 13.3">
  <!-- Generator: Adobe Illustrator 29.8.4, SVG Export Plug-In . SVG Version: 2.1.1 Build 6)  -->
  <defs>
    <style>
      .st0 {
        fill: none;
        stroke: #000;
        stroke-miterlimit: 10;
      }
    </style>
  </defs>
  <g id="_具">
    <polyline class="st0" points=".3 .4 9.1 6.6 .3 12.9"/>
  </g>
</svg>

イラレの別名保存→SVGで「🌎」マークをクリックするとこのようにSVGコードが出てきます。

参考サイトで

p{
  position: relative;

    content: "";
    font-size: 1em;
    display: block;
    transition: 300ms;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iX+ODrOOCpOODpOODvF8yIiBkYXRhLW5hbWU9IuODrOOCpOODpOODvCAyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMC4wMSIgaGVpZ2h0PSIxMy4yNyIgdmlld0JveD0iMCAwIDEwLjAxIDEzLjI3Ij4KICA8ZGVmcz4KICAgIDxzdHlsZT4KICAgICAgLmNscy0xIHsKICAgICAgICBmaWxsOiBub25lOwogICAgICAgIHN0cm9rZTogIzAwMDsKICAgICAgICBzdHJva2UtbWl0ZXJsaW1pdDogMTA7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9kZWZzPgogIDxnIGlkPSJf5YW3IiBkYXRhLW5hbWU9IuWFtyI+CiAgICA8cG9seWxpbmUgY2xhc3M9ImNscy0xIiBwb2ludHM9Ii4yOSAuNDEgOS4xNCA2LjYzIC4yOSAxMi44NiIvPgogIDwvZz4KPC9zdmc+

);
left: 0;
right: auto;
position: a;
position: absolute;
width: 20px;
height: 17px;
position: absolute;
top: 50%;
left: -1.5em;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);

}

}

    &:hover {
    color: var(--accent_color);
    background-color: #fff;
    border-color: var(--accent_color);
      p{&::before {
          background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iX+ODrOOCpOODpOODvF8yIiBkYXRhLW5hbWU9IuODrOOCpOODpOODvCAyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMC4wMSIgaGVpZ2h0PSIxMy4yNyIgdmlld0JveD0iMCAwIDEwLjAxIDEzLjI3Ij4KICA8ZGVmcz4KICAgIDxzdHlsZT4KICAgICAgLmNscy0xIHsKICAgICAgICBmaWxsOiBub25lOwogICAgICAgIHN0cm9rZTogIzAwMDsKICAgICAgICBzdHJva2UtbWl0ZXJsaW1pdDogMTA7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9kZWZzPgogIDxnIGlkPSJf5YW3IiBkYXRhLW5hbWU9IuWFtyI+CiAgICA8cG9seWxpbmUgY2xhc3M9ImNscy0xIiBwb2ludHM9Ii4yOSAuNDEgOS4xNCA2LjYzIC4yOSAxMi44NiIvPgogIDwvZz4KPC9zdmc+");
        }
      }
    }

とこのようにCSSを設定するとでてきます。hover時に別の画像に変えればホバー切り替えもできます。

svg画像をcssで扱えるので、とても便利ですね！

以上制作部の関でした。