2021年svgアイコンをCSSで実装する方法を本気で考えてみた

-

svgアイコンのすすめ

絵文字発祥の地、日本ならではの事かもしれないのですが。
webページ（サイト）を製作する際に必ず必要となってくるのが絵文字的に使用されているアイコンです。

webページでアイコンを使う場合ですが、3つの選択肢がありそれぞれメリットデメリットがあります。

  1. 「Font Awesome」や「Google icon」のweb fontを使った既存サービスを利用
    メリット
    cssを読みこむだけで使用できる。
    拡大時に荒くならない。
    フォントとして利用できるので、サイズ、色を自由に変更できる。
    あらゆるブラウザに対応している。
    更新等の運用が不要。
    デメリット
    既存サービスのため独自のアイコンが使えない。
    既存サービスは不要なアイコンも読み込むため容量が大きくなる。（SEO低下）
    独自のweb fontアイコンを作る場合は、難易度が高く運用も難しい。
  2. 画像を利用
    メリット
    あらゆるブラウザに対応している。
    自由なデザインで製作できる。
    デメリット
    拡大時に画像が荒くなる。
    場合によってはリサイズを含め多くのサイズを用意する必要がある。
    svgに比べて容量やファイル数が多くなる（SEO低下）
  3. svgを利用
    メリット
    ほとんどのブラウザに対応している。（IE9以上、Firefox3以上、Android Browser3以上、など）
    拡大時に荒くならない。
    自由なデザインで製作できる。
    画像、webfontに比べて圧倒的な低容量。（必要な物だけ製作すればよい）
    デメリット
    IE8以下で使えない。（利用者は、ほぼいない全体の0.1％以下）

アイコンの利用状況ですが、
メジャーECで確認してみると、海外由来のamazonでは★マークや[primeマーク]が使用されているくらいで、できるだけアイコンは使わず、文字で対応しているように感じます。対して楽天やYahooショッピングでは「お気に入り」「カート」「レビュー」「履歴」「マイページ」..etc.様々なアイコンが使われています。
上記のようなECサイトではIE対応や旧式スマホをカバーしなくてはならないためか画像でアイコンを表示しているようです。
また、Facebookやtwitterのような世界的なメジャーサービスサイトではsvgでアイコンを表示させており、がsvg化が進んできている状況です。

先日、2022年6月16日（日本時間）にIEのサポートが終了すると発表があったこともあり、そろそろsvg化を進める時期なのではと思います。
svgのマークアップ方法はいくつかあるのですが、img要素としてsvgファイルをリンクさせたり、svg要素を直接記述する方法が一般的です。
img要素はカラーの変更ができない制約がございますので、直接記述する方法が一番望ましいと思われます。
ですが、直接記述する場合、1回だけならそれほど問題はございませんが、複数回使用する場合はページ自体の容量が増えてしまいますし、svgを修正したい場合に更新しにくくなったりします。そこで、記述が簡単で使いまわしができ、カラー変更や更新もしやすい、おすすめ方法を2種類ご紹介いたします。

IEでも利用OK。svgをアンカーリンクで呼び出し

ページ内にsvgをまとめて記述しておき、使いたい場所でsvg要素にxlink:hrefでアンカーリンクとして呼び出すことができます。

メリット
同じsvgアイコンを何回でも使いまわせる。（xlink:hrefのアンカーリンクで呼び出し）
IEで使用できる。（IE対応が必須の場合はベスト解）
fill以外にstrokeも設定可能。（白抜きアイコンが設定できる）
文字との組み合わせたりアイコン同士を組み合わせたりsvgとしての自由度が高い。
デメリット
body内に記述する必要がある。つまり別ファイルにできない。（※別ファイルにしてJSでよみこみbody内に記述することで対応は可能）
svg要素の記述が必要。（ある程度のsvgの知識が必要）
グラデーションはテクニックが必要。（svg内にグラデーション用の要素を用意しておき、cssのurlでアンカーとして読み出しする。svg→css→svgのような参照となり直感的な運用が困難）

SVG

svgはbody内に記述する必要があります。
※外部ファイル化もJSで読み込み後body内に記述することで実現可能です。

<svg style="height: 0px; position: absolute; width: 0px;" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <symbol id="search-svg" viewbox="0 0 24 24">
      <title>検索</title>
      <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" />
    </symbol>
    <symbol id="heart-svg" viewbox="0 0 24 24">
      <title>ハート</title>
      <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
    </symbol>
    <symbol id="home-svg" viewBox="0 0 24 24">
      <title>ホーム</title>
      <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
    </symbol>
    <symbol id="person-svg" viewBox="0 0 28 28">
      <title>ユーザー</title>
      <circle cx="14" cy="14" r="14" opacity=".3"></circle>
      <circle cx="14" cy="9.71" r="5.01"></circle>
      <path d="M14,15.81a8.35,8.35,0,0,0-8.31,8.31v1.13a13.92,13.92,0,0,0,16.62,0V24.12A8.35,8.35,0,0,0,14,15.81Z"></path>
    </symbol>
    <symbol id="refresh-svg" viewBox="0 0 24 24">
      <title>リロード</title>
      <path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z" />
    </symbol>
    <symbol id="up-svg" viewBox="0 0 100 60" width="100">
      <title>UPラベル</title>
      <rect x="0" y="0" width="100" height="60" rx="15" ry="15" />
      <text x="50" y="30" dominant-baseline="central" text-anchor="middle" font-size="40" font-weight="bold" fill="#fff">UP</text>
    </symbol>
    <symbol id="special-svg" viewBox="0 0 220 60">
      <title>リロードラベル</title>
      <rect x="2" y="2" width="216" height="56" rx="15" ry="15" fill="#fff" stroke-width="4" />
      <text x="110" y="30" dominant-baseline="central" text-anchor="middle" font-size="36" font-weight="bold">スペシャル</text>
    </symbol>
    <linearGradient id="gradient-pink" x1="0" x2="0" y1="0" y2="1">
      <title>ピンクグラデーション</title>
      <stop offset="0" stop-color="#fbe2f0" />
      <stop offset="1" stop-color="#ee0290" />
    </linearGradient>
    <linearGradient id="gradient-blue" x1="0" x2="0" y1="0" y2="1">
      <title>ブルーグラデーション</title>
      <stop offset="0" stop-color="#d4bff9" />
      <stop offset="1" stop-color="#6002ee" />
    </linearGradient>
    <linearGradient id="gradient-orange" x1="0" x2="0" y1="0" y2="1">
      <title>オレンジグラデーション</title>
      <stop offset="0" stop-color="#ffc77d" />
      <stop offset="1" stop-color="#ee6002" />
    </linearGradient>
    <linearGradient id="gradient-green" x1="0" x2="0" y1="0" y2="1">
      <title>グリーングラデーション</title>
      <stop offset="0" stop-color="#c6f68d" />
      <stop offset="1" stop-color="#09af00" />
    </linearGradient>
  </defs>
</svg>

CSS

.svg-icon {
  width: 2em;
  height: 2em;
  display: inline-block;
  vertical-align: middle;
  fill: currentColor;
}
.svg-icon__2x {
  width: 2em;
  height: 2em;
}
.svg-label {
  height: 1em;
  width: auto;
  display: inline-block;
  vertical-align: middle;
  fill: currentColor;
  stroke: currentColor;
}
.svg-label + .svg-label {
  margin-left: 0.4em;
}
.color-pink {
  color: #ee0290;
}
.color-blue {
  color: #6002ee;
}
.color-orange {
  color: #ee6002;
}
.color-green {
  color: #41c300;
}

.fill-white {
  fill: #fff;
}
.fill-gray {
  fill: #ccc;
}
.fill-pink {
  fill: #ee0290;
}
.fill-light-pink {
  fill: #fbe2f0;
}
.fill-gradient-pink {
  fill: url(#gradient-pink);
}
.fill-blue {
  fill: #6002ee;
}
.fill-light-blue {
  fill: #d4bff9;
}
.fill-gradient-blue {
  fill: url(#gradient-blue);
}
.fill-orange {
  fill: #ee6002;
}
.fill-gradient-orange {
  fill: url(#gradient-orange);
}
.fill-green {
  fill: #41c300;
}
.fill-gradient-green {
  fill: url(#gradient-green);
}

.stroke-black {
  stroke: #000;
}
.stroke-pink {
  stroke: #ee0290;
}
.stroke-blue {
  stroke: #6002ee;
}
.stroke-orange {
  stroke: #ee6002;
}
.stroke-green {
  stroke: #41c300;
}
.rotation {
  animation: 1.5s linear infinite animation-rotation;
}

@keyframes animation-rotation {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

アイコン

<svg class="svg-icon"><use xlink:href="#search-svg"></use></svg>
<svg class="svg-icon color-pink"><use xlink:href="#search-svg"></use></svg>
<svg class="svg-icon color-blue"><use xlink:href="#search-svg"></use></svg>
<svg class="svg-icon color-orange"><use xlink:href="#heart-svg"></use></svg>
<svg class="svg-icon color-green"><use xlink:href="#heart-svg"></use></svg>

白抜き

<svg class="svg-icon fill-white stroke-black"><use xlink:href="#search-svg"></use></svg>
<svg class="svg-icon fill-white stroke-pink"><use xlink:href="#search-svg"></use></svg>
<svg class="svg-icon fill-white stroke-blue"><use xlink:href="#search-svg"></use></svg>
<svg class="svg-icon fill-white stroke-orange"><use xlink:href="#heart-svg"></use></svg>
<svg class="svg-icon fill-white stroke-green"><use xlink:href="#heart-svg"></use></svg>

大きさの変更

<svg class="svg-icon svg-icon__2x"><use xlink:href="#search-svg"></use></svg>
<svg class="svg-icon svg-icon__2x color-pink"><use xlink:href="#search-svg"></use></svg>
<svg class="svg-icon svg-icon__2x color-blue"><use xlink:href="#search-svg"></use></svg>
<svg class="svg-icon svg-icon__2x color-orange"><use xlink:href="#heart-svg"></use></svg>
<svg class="svg-icon svg-icon__2x color-green"><use xlink:href="#heart-svg"></use></svg>

大きさ、白抜きなどの組合せ

<svg class="svg-icon"><use xlink:href="#home-svg"></use></svg>
<svg class="svg-icon color-pink"><use xlink:href="#home-svg"></use></svg>
<svg class="svg-icon fill-white stroke-blue"><use xlink:href="#home-svg"></use></svg>
<svg class="svg-icon color-orange svg-icon__2x"><use xlink:href="#home-svg"></use></svg>
<svg class="svg-icon fill-white stroke-green svg-icon__2x"><use xlink:href="#home-svg"></use></svg>

2トーン

<svg class="svg-icon svg-icon__2x"><use xlink:href="#person-svg"></use></svg>
<svg class="svg-icon svg-icon__2x fill-pink"><use xlink:href="#person-svg"></use></svg>
<svg class="svg-icon svg-icon__2x fill-blue"><use xlink:href="#person-svg"></use></svg>

回転

<svg class="svg-icon color-blue rotation"><use xlink:href="#refresh-svg"></use></svg>

グラデーション

<svg class="svg-icon fill-gradient-pink svg-icon__2x"><use xlink:href="#home-svg"></use></svg>
<svg class="svg-icon fill-gradient-blue svg-icon__2x"><use xlink:href="#home-svg"></use></svg>
<svg class="svg-icon fill-gradient-orange svg-icon__2x"><use xlink:href="#heart-svg"></use></svg>
<svg class="svg-icon fill-gradient-green svg-icon__2x"><use xlink:href="#heart-svg"></use></svg>

文字との組み合わせ

※IEで要確認

検索 HOME ユーザー リロード 
<svg class="svg-icon svg-icon__2x" viewBox="0 5 24 30"><use xlink:href="#search-svg"></use><text font-size="8" font-weight="bold" x="12" y="30" dominant-baseline="central" text-anchor="middle">検索</text></svg>
<svg class="svg-icon svg-icon__2x" viewBox="0 5 24 30"><use xlink:href="#home-svg"></use><text font-size="8" font-weight="bold" x="12" y="30" dominant-baseline="central" text-anchor="middle">HOME</text></svg>
<svg class="svg-icon svg-icon__2x fill-blue" viewBox="0 8 28 44"><use class="fill-blue" xlink:href="#person-svg"></use><text font-size="10" font-weight="bold" x="14" y="44" dominant-baseline="central" text-anchor="middle">ユーザー</text></svg>
<svg class="svg-icon svg-icon__2x" viewBox="0 5 24 30"><use xlink:href="#refresh-svg"></use><text font-size="8" font-weight="bold" x="12" y="30" dominant-baseline="central" text-anchor="middle">リロード</text></svg>

ラベルバッジ

※IEで要確認

<svg class="svg-label" viewBox="0 0 100 60"><use xlink:href="#up-svg"></use></svg>
<svg class="svg-label color-pink" viewBox="0 0 100 60"><use xlink:href="#up-svg"></use></svg>
<svg class="svg-label color-pink fill-gradient-pink" viewBox="0 0 100 60"><use xlink:href="#up-svg"></use></svg>
<svg class="svg-label color-blue" viewBox="0 0 100 60"><use xlink:href="#up-svg"></use></svg>
<svg class="svg-label color-blue fill-gradient-blue" viewBox="0 0 100 60"><use xlink:href="#up-svg"></use></svg>
<svg class="svg-label color-orange" viewBox="0 0 100 60"><use xlink:href="#up-svg"></use></svg>
<svg class="svg-label color-orange fill-gradient-orange" viewBox="0 0 100 60"><use xlink:href="#up-svg"></use></svg>
<svg class="svg-label color-green" viewBox="0 0 100 60"><use xlink:href="#up-svg"></use></svg>
<svg class="svg-label color-green fill-gradient-green" viewBox="0 0 100 60"><use xlink:href="#up-svg"></use></svg>

白抜きラベル

※IEで要確認

<svg class="svg-label" viewBox="0 0 220 60"><use xlink:href="#special-svg"></use></svg>
<svg class="svg-label color-pink" viewBox="0 0 220 60"><use xlink:href="#special-svg"></use></svg>
<svg class="svg-label color-blue" viewBox="0 0 220 60"><use xlink:href="#special-svg"></use></svg>
<svg class="svg-label color-orange" viewBox="0 0 220 60"><use xlink:href="#special-svg"></use></svg>
<svg class="svg-label color-green" viewBox="0 0 220 60"><use xlink:href="#special-svg"></use></svg>

IE以外のモダンブラウザならmask-imageで背景カラーをマスクでOK。cssにsvgを書き込めるので要素を簡潔にできる

ここで紹介する方法は、CSSにmask-imageとしてsvgをマスクとして利用し、また直接記述することで外部ファイル化を防ぎ、cssを読み込むだけでどこでもアイコンが使用できるという方法です。つまり「Font Awesome」や「Google icon」のようにアイコンを利用したいページにcssをリンクさせ、span要素にclass指定するだけで任意のsvgアイコンが使用できるという方法です。
IE11の威容率が1.26％ですので利用は限定的だと思われます。スマホオンリーのサイトやアプリのwebビューであれば現時点でも利用は可能だと思います。
IEのサポートが終わる2022/6/16以降であればもっと利用率が下がってくると思いますので検討の余地は十分あるかと思います。

メリット
同じsvgアイコンを何回でも使いまわせる。（class属性で指定するだけ）
cssとして外部ファイル化できるのでサイト全体でsvgアイコンを使いまわせる。
背景をマスクしているだけなのでグラデーションなどが直感的に操作できる。
疑似要素（::before::after）で使用可能。
デメリット
IEで使用不可。（IE11:利用率1.26％、2021/7/10時点）
マスクとして働くため線（stroke）での指定は厳しい。（もしかしたら方法があるかも）
文字との組合せはテクニックが必要。（svgとして使用するわけではないため）

CSS

/*CSSでSVGマスク*/
.search-svg-icon {
  -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" /></svg>');
}
.home-svg-icon {
  -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" /></svg>');
}
.person-svg-icon {
  -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-4 -4 36 36"><circle cx="14" cy="14" r="14" opacity=".3"></circle><circle cx="14" cy="9.71" r="5.01"></circle><path d="M14,15.81a8.35,8.35,0,0,0-8.31,8.31v1.13a13.92,13.92,0,0,0,16.62,0V24.12A8.35,8.35,0,0,0,14,15.81Z"></path></svg>');
}
.refresh-svg-icon {
  -webkit-mask-image: url('data:image/svg+xml,<<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z" /></svg>');
}
.heart-svg-icon {
  -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" /></svg>');
}
.up-svg-label {
  width: 1.7em;
  -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 60"><rect x="0" y="0" width="100" height="60" rx="15" ry="15" /></svg>');
}
.up-svg-label::after {
  content: "UP";
}
.svg-icon-title {
  text-align: center;
  font-weight: bold;
  margin-top: -0.8em;
  display: block;
}
[class*="-svg-icon"] {
  width: 2em;
  height: 2em;
  display: inline-block;
  background-color: currentColor;
  overflow: hidden;
}
[class*="-svg-icon"][class*="gradient-"],
[class*="-svg-label"][class*="gradient-"] {
  color: transparent;
}
.size-2x {
  width: 4em;
  height: 4em;
}
[class*="-svg-label"] {
  height: 1em;
  display: inline-block;
  background-color: currentColor;
  vertical-align: middle;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
  position: relative;
  mask-size: contain;
  -webkit-mask-size: contain;
  overflow: hidden;
}
[class*="-svg-label"]::after {
  position: absolute;
  color: #fff;
  font-size: 60%;
  font-weight: bold;
  top: 50%;
  line-height: 1;
  margin-top: -0.5em;
  width: 100%;
  text-align: center;
  display: block;
}
[class*="-svg-label"] + [class*="-svg-label"] {
  margin-left: 0.4em;
}
/*グラデーション*/
.gradient-pink {
  background-image: linear-gradient(#fbe2f0, #ee0290);
}
.gradient-blue {
  background-image: linear-gradient(#d4bff9, #6002ee);
}
.gradient-orange {
  background-image: linear-gradient(#ffc77d, #ee6002);
}
.gradient-green {
  background-image: linear-gradient(#c6f68d, #09af00);
}
/*疑似要素*/
.btn {
  padding: 1em 1em 1em 3.5em;
  margin: 0.5em;
  display: inline-block;
  border: solid thin #ccc;
  border-radius: 0.5em;
  position: relative;
  color: #6002ee;
}
.btn::before {
  content: "";
  -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" /></svg>');
  background-color: currentColor;
  position: absolute;
  top: 50%;
  left: 1em;
  width: 2em;
  height: 2em;
  margin-top: -1em;
}

アイコン

検索検索検索検索検索 
<span class="search-svg-icon">検索</span>
<span class="search-svg-icon color-pink">検索</span>
<span class="search-svg-icon color-blue">検索</span>
<span class="heart-svg-icon color-orange">検索</span>
<span class="heart-svg-icon color-green">検索</span>

大きさの変更

検索検索検索お気に入りお気に入り 
<span class="search-svg-icon size-2x">検索</span>
<span class="search-svg-icon color-pink size-2x">検索</span>
<span class="search-svg-icon color-blue size-2x">検索</span>
<span class="heart-svg-icon color-orange size-2x">お気に入り</span>
<span class="heart-svg-icon color-green size-2x">お気に入り</span>

2トーン

ユーザーユーザーユーザー 
<span class="person-svg-icon size-2x">ユーザー</span>
<span class="person-svg-icon color-pink size-2x">ユーザー</span>
<span class="person-svg-icon color-blue size-2x">ユーザー</span>

回転

リロード
<span class="refresh-svg-icon rotation color-blue">リロード</span>

グラデーション

ホーム ホーム ホーム ホーム 
<span class="home-svg-icon size-2x gradient-pink">ホーム</span>
<span class="home-svg-icon size-2x gradient-blue">ホーム</span>
<span class="home-svg-icon size-2x gradient-orange">ホーム</span>
<span class="home-svg-icon size-2x gradient-green">ホーム</span>

文字との組み合わせ

検索検索
HOMEHOME
ユーザーユーザー
リロードリロード 
<div><span class="search-svg-icon size-2x">検索</span><span class="svg-icon-title">検索</span></div>
<div><span class="home-svg-icon size-2x">HOME</span><span class="svg-icon-title">HOME</span></div>
<div><span class="person-svg-icon size-2x">ユーザー</span><span class="svg-icon-title">ユーザー</span></div>
<div><span class="refresh-svg-icon size-2x">リロード</span><span class="svg-icon-title">リロード</span></div>

ラベルバッジ

UP UP UP UP UP UP UP UP UP 
<span class="up-svg-label">UP</span>
<span class="up-svg-label color-pink">UP</span>
<span class="up-svg-label gradient-pink">UP</span>
<span class="up-svg-label color-blue">UP</span>
<span class="up-svg-label gradient-blue">UP</span>
<span class="up-svg-label color-orange">UP</span>
<span class="up-svg-label gradient-orange">UP</span>
<span class="up-svg-label color-green">UP</span>
<span class="up-svg-label gradient-green">UP</span>

疑似要素にSVG

疑似要素にSVG
CSS 
.btn::before {
  content: "";
  -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" /></svg>');
  background-color: currentColor;
  position: absolute;
  top: 50%;
  left: 1em;
  width: 2em;
  height: 2em;
  margin-top: -1em;
}
HTML 
<span class="btn">疑似要素にSVG</span>
UP スペシャル

以下codepenにもまとめて寄稿しておりますので、ご参考まで。

See the Pen svgをCSSでカラーやサイズを変更する方法 by yoshiaki nakao (@woopeer) on CodePen.

コメント

コメントを投稿

このブログの人気の投稿

パタパタ時計flip clockを作ってみた

-
イメージ
パタパタ時計をページ内に表示したくて作ってみました。  CSS等で３D表現しようとしたのですが、環境によって表示が重くなる場合があり、思ったよりカクカクした表示になってしまう場合がございました。またプラスチックのざらっとしたテクスチャも入れてみたかったので思い切って画像で対応することにしました。 そこで、下記の様な画像を制作いたしました。  ０から９までの数字毎に縦10列の構成になっていて、４コマで動く様に動かして行きます。 列の上から下に１列目が１コマ目、２列目が２コマ目、３列目が３コマ目、４列目が最終的に表示させたい数字になります。150ミリ秒ごとに列を動かして動いている様に見せています。 See the Pen flip clock by yoshiaki nakao ( @woopeer ) on CodePen . html、css、javascriptをうまく連携させて行います。 今回動かしたいパーツは、「時（十の位）」「時（一の位）」「分（十の位）」「分（一の位）」「秒（十の位）」「秒（一の位）」の６パーツになります。それぞれ <div id="hour10"></div><div id="hour1"></div><div id="min10"></div><div id="min1"></div><div id="sec10"></div><div id="sec1"></div>というブロックで構成いたしました。 先ずは、css。予め各パーツの背景に画像を貼り付けておきます（background-image）。 位置（background-position）はJSで設定するので設定を省きます。画像を１コマサイズ　横60px　縦100pxで制作してますが余白が下2px横4pxですのでそれぞれのパーツを　横56px　縦98px　で固定しました。秒に関しては時分より少し小さく表示させたかったので、cssで縮小（transform: scale3d）させています。 実際
続きを読む

「…続きを読む」リンク

-
 よくある依頼で長い文章の際に冒頭だけ表示したい。つまり、n行以上の場合に折りたたんで「…続きを読む」リンクを付けたいということがあります。その場合、たいていJavascriptの制御で実現させるというのが定石となります。ただ、よくあるということもあり汎用的に使えるJavascriptを作ってみましたのでご紹介いたします。 See the Pen 「…続きを読む」リンク by yoshiaki nakao ( @woopeer ) on CodePen . 設置準備 今回はjQueryを使わせていただきましたので、GoogleのCDNライブラリを読み込んでおきます。※ヘッダー等ですでに読み込み済みの場合は不要です。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 今回作成したJavascriptは以下になりまして、body内に記述する場合は、本文の邪魔にならないようbody内のできるだけ下部に設置すると（SEO的に）よいかもしれません。また、外部に設置したり、設置済みのものに追加する場合は、jQueryの後に読み込ませてください。 <script> $(function(){ $(function () { $(".more-link").each(function (v_n) { $(this).after('<div class="more-link-after"></div>'); f_lessText(v_n); }); }); function f_moreText(v_n) { var e_text = $(".more-link").eq(v_n); var v_closeHeight = e_text.height(); var v_poenHeight = e_text.css("height", "aut
続きを読む

100マス計算をwebで作ってみた

-
イメージ
小学生の算数の基礎学力向上のため、100マス計算を手軽にどこでもできる様にと、webアプリを作ってみました。 https://woopeer.com/100cells_calculation/ 小学生の算数は結局のところ四則計算（＋ー×÷）ができなくては話になりません。また、高学年になればなるほど 計算のスピード も重要な要素になってきます。 特に中学受験をお考えの方は、２桁の掛け算の暗算が必須と言われております。２桁の掛け算が暗算で、できるできないで問題を解くスピードが大きく変わってきます。受験時の算数に関してですが、普通にやっていては試験時間内に最後まで問題を解くことはできません。特に冒頭に出てくる計算問題がポイントで、正確に素早く解くことが求められます。 ここができるかが合否の分かれ目だといっても過言ではないでしょう。 ２桁の計算スピードのアドバンテージは必ず受験に役立つ物であるとお約束いたします。また受験でなくても１桁等の計算はもとより２桁の四則計算が暗算でできる様になれば一生の宝となり得ます。 操作方法 操作方法はとても簡単です。直感的な操作ができるようになっておりまして「＋」「ー」「X」のボタンのどれかを押せばスタートするようになっております。 全問回答した後、間違っている箇所は赤くエラー表示されますので間違ったところをすぐ訂正できます。 また、それぞれレベル設定ができるようになっております。レベルを上げていくと1～１０以上の数字となりまして例えばレベル10の足し算ですと横の列が20～29となり小学校低学年のお子様にちょうどよいかと思います。 おすすめはレベル10からの掛け算で横の列が10～19の掛け算です。この計算がすらすらとできるようになると小学生での算数はマスターしたも同然です。 ゲーム要素も多少取り入れておりまして、解いた時間によって🌻マークを表示させるようになっております。時間内に解いて🌻🌻🌻を目指してみては？。
続きを読む