We Blog Weblog

かがやくSVG

Web

2024年9月5日

みなさんこんにちは。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回は、SVGをネオン看板っぽく光らせてみようと思います。

・インラインSVGの<style>タグ内に書き込む

・パーツごとに色を変える

・イラレでパスを連結する

・まとめ

インラインSVGの<style>タグ内に書き込む

まずはSVGを用意します。

この前イラストレーターで描いた「安息香酸」です。

インラインSVGの<style>と</style>の間にスタイルを書いていきます。

前回テキストを光らせる時に使ったのはtext-shadowでしたが、今回はfilter:drop-shadowを使っていきます。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 2000 1000" style="enable-background:new 0 0 2000 1000;" xml:space="preserve">
  <style type="text/css">
    .line {
      fill:none;
      stroke:#000;
      stroke-width:10;
      stroke-miterlimit:10;
    }
    .path {
      fill:#000;
      stroke:none;
    }
    @media(prefers-color-scheme: light) {
      .line {
        fill:none;
        stroke:#000;
        stroke-width:10;
        stroke-miterlimit:10;
      }
      .path {
        fill:#000;
      }
    }
    @media(prefers-color-scheme: dark) {
      .line {
        fill:none;
        stroke:#fff;
        stroke-width:10;
        stroke-miterlimit:10;
      }
      .path {
        fill:#fff;
      }
      svg {
        filter: drop-shadow(0 0 0.5px #fff)drop-shadow(0 0 1px #fff)drop-shadow(0 0 1.5px #fff)drop-shadow(0 0 2px #228DFF)drop-shadow(0 0 3.5px #228DFF)drop-shadow(0 0 4px #228DFF)drop-shadow(0 0 5px #228DFF)drop-shadow(0 0 7.5px #228DFF);
      }
    }       
    .dark-theme .line {
      fill:none;
      stroke:#fff;
      stroke-width:10;
      stroke-miterlimit:10;
    }
    .dark-theme .path {
      fill:#fff;
    }
    .dark-theme svg {
      filter: drop-shadow(0 0 0.5px #fff)drop-shadow(0 0 1px #fff)drop-shadow(0 0 1.5px #fff)drop-shadow(0 0 2px #228DFF)drop-shadow(0 0 3.5px #228DFF)drop-shadow(0 0 4px #228DFF)drop-shadow(0 0 5px #228DFF)drop-shadow(0 0 7.5px #228DFF);
    }
    .dark-theme .line {
      fill:none;
      stroke:#fff;
      stroke-width:10;
      stroke-miterlimit:10;
    }
    .dark-theme .path {
      fill:#fff;
      stroke:none;
    }
    .dark-theme svg {
      filter: drop-shadow(0 0 0.5px #fff)drop-shadow(0 0 1px #fff)drop-shadow(0 0 1.5px #fff)drop-shadow(0 0 2px #228DFF)drop-shadow(0 0 3.5px #228DFF)drop-shadow(0 0 4px #228DFF)drop-shadow(0 0 5px #228DFF)drop-shadow(0 0 7.5px #228DFF);
    }
  </style>
  <polygon class="line" points="709.3,242 466.1,382.4 466.1,663.2 709.3,803.6 952.5,663.2 952.5,382.4"/>
  <line class="line" x1="952.7" y1="382.3" x2="1112.1" y2="290.3"/>
  <line class="line" x1="518.7" y1="411.3" x2="710.7" y2="301.3"/>
  <line class="line" x1="902.7" y1="633.3" x2="902.7" y2="411.3"/>
  <line class="line" x1="710.7" y1="744.3" x2="518.7" y2="633.3"/>
  <path class="path" d="M1225.2,207.1c7.5,7.2,11.7,15.3,12.5,24.5h-14.2c-1.6-6.9-4.8-12.4-9.6-16.5c-4.8-4.1-11.6-6.1-20.3-6.1 c-10.6,0-19.2,3.7-25.7,11.2c-6.5,7.4-9.8,18.9-9.8,34.2c0,12.6,2.9,22.8,8.8,30.7c5.9,7.8,14.7,11.8,26.3,11.8 c10.7,0,18.9-4.1,24.5-12.4c3-4.3,5.2-10.1,6.7-17.1h14.2c-1.3,11.3-5.5,20.8-12.6,28.5c-8.5,9.2-20.1,13.8-34.6,13.8 c-12.5,0-23-3.8-31.5-11.4c-11.2-10-16.8-25.5-16.8-46.4c0-15.9,4.2-28.9,12.6-39c9.1-11,21.6-16.6,37.6-16.6 C1207.1,196.4,1217.7,199.9,1225.2,207.1z"/>
  <path class="path" d="M1345.1,214.7c7.1,9.5,10.7,21.7,10.7,36.5c0,16.1-4.1,29.4-12.2,40.1c-9.6,12.5-23.2,18.8-40.9,18.8 c-16.6,0-29.6-5.5-39-16.4c-8.4-10.5-12.7-23.9-12.7-40c0-14.5,3.6-27,10.8-37.4c9.3-13.3,23-19.9,41.2-19.9 C1321.9,196.4,1335.9,202.5,1345.1,214.7z M1332.2,283.2c5.7-9.2,8.6-19.8,8.6-31.8c0-12.6-3.3-22.8-9.9-30.5 c-6.6-7.7-15.7-11.6-27.1-11.6c-11.1,0-20.2,3.8-27.2,11.5c-7,7.6-10.5,18.9-10.5,33.8c0,11.9,3,22,9,30.1 c6,8.2,15.8,12.3,29.3,12.3C1317.2,297,1326.5,292.4,1332.2,283.2z"/>
  <path class="path" d="M1448.5,199.3h14.7v44.5h56v-44.5h14.7v107.6h-14.7v-50.3h-56v50.3h-14.7V199.3z"/>
  <path class="path" d="M1372.4,320.9c2.7-5.6,8-10.6,15.8-15.2l11.7-6.8c5.2-3.1,8.9-5.7,11-7.8c3.3-3.4,5-7.2,5-11.6c0-5.1-1.5-9.1-4.6-12.1 c-3.1-3-7.1-4.5-12.2-4.5c-7.5,0-12.7,2.8-15.6,8.5c-1.5,3.1-2.4,7.3-2.6,12.7h-11.2c0.1-7.6,1.5-13.8,4.2-18.6 c4.8-8.5,13.2-12.7,25.2-12.7c10,0,17.3,2.7,21.9,8.1c4.6,5.4,6.9,11.4,6.9,18.1c0,7-2.5,13-7.4,17.9c-2.8,2.9-8,6.4-15.3,10.5 l-8.4,4.6c-4,2.2-7.1,4.3-9.4,6.3c-4.1,3.5-6.6,7.5-7.7,11.8h47.7v10.4h-60C1368.1,333,1369.7,326.5,1372.4,320.9z"/>
</svg>

filer:drop-shadowを複数重ねる時は
filter:drop-shadow(0 0 〇px #〇〇〇)drop-shadow(0 0 〇px #〇〇〇)・・・
のように書くそうです。

パーツごとに色を変える

SVGのパーツごとにクラスとスタイルを設定してあげればパーツごとに色が変えられる ・・・はずです。

ベンゼン環と炭素は青、酸素は緑、水素はピンク、数字の2は黄色、にしてみました。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 2000 1000" style="enable-background:new 0 0 2000 1000;" xml:space="preserve">
  <style type="text/css">
    .line {
      fill:none;
      stroke:#000;
      stroke-width:10;
      stroke-miterlimit:10;
    }
    .path {
      fill:#000;
    }
    @media(prefers-color-scheme: dark) {
      .line {
        fill:none;
        stroke:#fff;
        stroke-width:10;
        stroke-miterlimit:10;
      }
      .path {
        fill:#fff;
      }   
      .line.blue {
        filter: drop-shadow(0 0 0.5px #fff)drop-shadow(0 0 1px #fff)drop-shadow(0 0 1.5px #fff)drop-shadow(0 0 2px #228DFF)drop-shadow(0 0 3.5px #228DFF)drop-shadow(0 0 4px #228DFF)drop-shadow(0 0 5px #228DFF)drop-shadow(0 0 7.5px #228DFF);
      }
      .path.blue {
        filter: drop-shadow(0 0 0.5px #fff)drop-shadow(0 0 1px #fff)drop-shadow(0 0 1.5px #fff)drop-shadow(0 0 2px #228DFF)drop-shadow(0 0 3.5px #228DFF)drop-shadow(0 0 4px #228DFF)drop-shadow(0 0 5px #228DFF)drop-shadow(0 0 7.5px #228DFF);
      }
      .path.pink {
        filter: drop-shadow(0 0 0.5px #fff)drop-shadow(0 0 1px #fff)drop-shadow(0 0 1.5px #fff)drop-shadow(0 0 2px #ff1177)drop-shadow(0 0 3.5px #ff1177)drop-shadow(0 0 4px #ff1177)drop-shadow(0 0 5px #ff1177)drop-shadow(0 0 7.5px #ff1177);
      }
      .path.yellow {
        filter: drop-shadow(0 0 0.5px #fff)drop-shadow(0 0 1px #fff)drop-shadow(0 0 1.5px #fff)drop-shadow(0 0 2px #ffdd1b)drop-shadow(0 0 3.5px #ffdd1b)drop-shadow(0 0 4px #ffdd1b)drop-shadow(0 0 5px #ffdd1b)drop-shadow(0 0 7.5px #ffdd1b);
      }
      .path.green {
        filter: drop-shadow(0 0 0.5px #fff)drop-shadow(0 0 1px #fff)drop-shadow(0 0 1.5px #fff)drop-shadow(0 0 2px #2dcb45)drop-shadow(0 0 3.5px #2dcb45)drop-shadow(0 0 4px #2dcb45)drop-shadow(0 0 5px #2dcb45)drop-shadow(0 0 7.5px #2dcb45);
      }
      .light-theme .line {
        fill:none;
        stroke:#000;
        stroke-width:10;
        stroke-miterlimit:10;
      }
      .light-theme .path {
        fill:#000;
      }
      .light-theme .line.blue {
        filter:none;
      }
      .light-theme .path.blue {
        filter:none;
      }
      .light-theme .path.pink {
        filter:none;
      }
      .light-theme .path.yellow {
        filter:none;
      }
      .light-theme .path.green {
        filter:none;
      }
      .dark-theme .line {
        fill:none;stroke:#fff;stroke-width:10;stroke-miterlimit:10;
      }
      .dark-theme .path {
        fill:#fff;
      }
      .dark-theme .line.blue {
        filter: drop-shadow(0 0 0.5px #fff)drop-shadow(0 0 1px #fff)drop-shadow(0 0 1.5px #fff)drop-shadow(0 0 2px #228DFF)drop-shadow(0 0 3.5px #228DFF)drop-shadow(0 0 4px #228DFF)drop-shadow(0 0 5px #228DFF)drop-shadow(0 0 7.5px #228DFF);
      }                
      .dark-theme .path.blue {
        filter: drop-shadow(0 0 0.5px #fff)drop-shadow(0 0 1px #fff)drop-shadow(0 0 1.5px #fff)drop-shadow(0 0 2px #228DFF)drop-shadow(0 0 3.5px #228DFF)drop-shadow(0 0 4px #228DFF)drop-shadow(0 0 5px #228DFF)drop-shadow(0 0 7.5px #228DFF);
      }
      .dark-theme .path.pink {
        filter: drop-shadow(0 0 0.5px #fff)drop-shadow(0 0 1px #fff)drop-shadow(0 0 1.5px #fff)drop-shadow(0 0 2px #ff1177)drop-shadow(0 0 3.5px #ff1177)drop-shadow(0 0 4px #ff1177)drop-shadow(0 0 5px #ff1177)drop-shadow(0 0 7.5px #ff1177);
      }
      .dark-theme .path.yellow {
        filter: drop-shadow(0 0 0.5px #fff)drop-shadow(0 0 1px #fff)drop-shadow(0 0 1.5px #fff)drop-shadow(0 0 2px #ffdd1b)drop-shadow(0 0 3.5px #ffdd1b)drop-shadow(0 0 4px #ffdd1b)drop-shadow(0 0 5px #ffdd1b)drop-shadow(0 0 7.5px #ffdd1b);
      }
      .dark-theme .path.green {
        filter: drop-shadow(0 0 0.5px #fff)drop-shadow(0 0 1px #fff)drop-shadow(0 0 1.5px #fff)drop-shadow(0 0 2px #2dcb45)drop-shadow(0 0 3.5px #2dcb45)drop-shadow(0 0 4px #2dcb45)drop-shadow(0 0 5px #2dcb45)drop-shadow(0 0 7.5px #2dcb45);
      }
    }
    .dark-theme .line {
      fill:none;stroke:#fff;stroke-width:10;stroke-miterlimit:10;
    }
    .dark-theme .path {
      fill:#fff;
    }
    .dark-theme .line.blue {
      filter: drop-shadow(0 0 0.5px #fff)drop-shadow(0 0 1px #fff)drop-shadow(0 0 1.5px #fff)drop-shadow(0 0 2px #228DFF)drop-shadow(0 0 3.5px #228DFF)drop-shadow(0 0 4px #228DFF)drop-shadow(0 0 5px #228DFF)drop-shadow(0 0 7.5px #228DFF);
    }
    .dark-theme .path.blue {
      filter: drop-shadow(0 0 0.5px #fff)drop-shadow(0 0 1px #fff)drop-shadow(0 0 1.5px #fff)drop-shadow(0 0 2px #228DFF)drop-shadow(0 0 3.5px #228DFF)drop-shadow(0 0 4px #228DFF)drop-shadow(0 0 5px #228DFF)drop-shadow(0 0 7.5px #228DFF);
    }
    .dark-theme .path.pink {
      filter: drop-shadow(0 0 0.5px #fff)drop-shadow(0 0 1px #fff)drop-shadow(0 0 1.5px #fff)drop-shadow(0 0 2px #ff1177)drop-shadow(0 0 3.5px #ff1177)drop-shadow(0 0 4px #ff1177)drop-shadow(0 0 5px #ff1177)drop-shadow(0 0 7.5px #ff1177);
    }
    .dark-theme .path.yellow {
      filter: drop-shadow(0 0 0.5px #fff)drop-shadow(0 0 1px #fff)drop-shadow(0 0 1.5px #fff)drop-shadow(0 0 2px #ffdd1b)drop-shadow(0 0 3.5px #ffdd1b)drop-shadow(0 0 4px #ffdd1b)drop-shadow(0 0 5px #ffdd1b)drop-shadow(0 0 7.5px #ffdd1b);
    }
    .dark-theme .path.green {
      filter: drop-shadow(0 0 0.5px #fff)drop-shadow(0 0 1px #fff)drop-shadow(0 0 1.5px #fff)drop-shadow(0 0 2px #2dcb45)drop-shadow(0 0 3.5px #2dcb45)drop-shadow(0 0 4px #2dcb45)drop-shadow(0 0 5px #2dcb45)drop-shadow(0 0 7.5px #2dcb45);
    }
  </style>
  <polygon class="line blue" points="709.3,242 466.1,382.4 466.1,663.2 709.3,803.6 952.5,663.2 952.5,382.4"/>
  <line class="line blue" x1="952.7" y1="382.3" x2="1112.1" y2="290.3"/>
  <line class="line blue" x1="518.7" y1="411.3" x2="710.7" y2="301.3"/>
  <line class="line blue" x1="902.7" y1="633.3" x2="902.7" y2="411.3"/>
  <line class="line blue" x1="710.7" y1="744.3" x2="518.7" y2="633.3"/>
  <path class="path blue" d="M1225.2,207.1c7.5,7.2,11.7,15.3,12.5,24.5h-14.2c-1.6-6.9-4.8-12.4-9.6-16.5c-4.8-4.1-11.6-6.1-20.3-6.1 c-10.6,0-19.2,3.7-25.7,11.2c-6.5,7.4-9.8,18.9-9.8,34.2c0,12.6,2.9,22.8,8.8,30.7c5.9,7.8,14.7,11.8,26.3,11.8 c10.7,0,18.9-4.1,24.5-12.4c3-4.3,5.2-10.1,6.7-17.1h14.2c-1.3,11.3-5.5,20.8-12.6,28.5c-8.5,9.2-20.1,13.8-34.6,13.8 c-12.5,0-23-3.8-31.5-11.4c-11.2-10-16.8-25.5-16.8-46.4c0-15.9,4.2-28.9,12.6-39c9.1-11,21.6-16.6,37.6-16.6 C1207.1,196.4,1217.7,199.9,1225.2,207.1z"/>
  <path class="path green" d="M1345.1,214.7c7.1,9.5,10.7,21.7,10.7,36.5c0,16.1-4.1,29.4-12.2,40.1c-9.6,12.5-23.2,18.8-40.9,18.8 c-16.6,0-29.6-5.5-39-16.4c-8.4-10.5-12.7-23.9-12.7-40c0-14.5,3.6-27,10.8-37.4c9.3-13.3,23-19.9,41.2-19.9 C1321.9,196.4,1335.9,202.5,1345.1,214.7z M1332.2,283.2c5.7-9.2,8.6-19.8,8.6-31.8c0-12.6-3.3-22.8-9.9-30.5 c-6.6-7.7-15.7-11.6-27.1-11.6c-11.1,0-20.2,3.8-27.2,11.5c-7,7.6-10.5,18.9-10.5,33.8c0,11.9,3,22,9,30.1 c6,8.2,15.8,12.3,29.3,12.3C1317.2,297,1326.5,292.4,1332.2,283.2z"/>
  <path class="path pink" d="M1448.5,199.3h14.7v44.5h56v-44.5h14.7v107.6h-14.7v-50.3h-56v50.3h-14.7V199.3z"/>
  <path class="path yellow" d="M1372.4,320.9c2.7-5.6,8-10.6,15.8-15.2l11.7-6.8c5.2-3.1,8.9-5.7,11-7.8c3.3-3.4,5-7.2,5-11.6c0-5.1-1.5-9.1-4.6-12.1 c-3.1-3-7.1-4.5-12.2-4.5c-7.5,0-12.7,2.8-15.6,8.5c-1.5,3.1-2.4,7.3-2.6,12.7h-11.2c0.1-7.6,1.5-13.8,4.2-18.6 c4.8-8.5,13.2-12.7,25.2-12.7c10,0,17.3,2.7,21.9,8.1c4.6,5.4,6.9,11.4,6.9,18.1c0,7-2.5,13-7.4,17.9c-2.8,2.9-8,6.4-15.3,10.5 l-8.4,4.6c-4,2.2-7.1,4.3-9.4,6.3c-4.1,3.5-6.6,7.5-7.7,11.8h47.7v10.4h-60C1368.1,333,1369.7,326.5,1372.4,320.9z"/>
</svg>

 

残念ながらiPhoneではネオンエフェクトを見ることができませんでした。

SafariやChromeではSVGのグラフィックノード（pathとかlineとか）に対するCSSのfilterは無効になるみたいです。

パソコンではこんな風になっています。

ああっ　六角形と斜線のつなぎ目が気になるぅぅぅ

イラレでパスを連結する

イラストレーターを使って、六角形と斜線を連結させましょう。

ちなみに「連結」というのは・・・

こんな感じで2本の線が接しているとき、

左側のメニューにある「連結ツール」を選んで、

つなぎ目をなぞってあげると、

シャキーン！とこのようにいい感じにつなげてくれます。

では六角形と斜線でやってみましょう。

「多角形ツール」で六角形を描きます。

「直線ツール」で斜線を引きます。

「連結ツール」以外では、上のメニューにある「オブジェクト」→「パス」→「連結」でも同じことができます。

・・・が、残念ながら図形と線は連結できないようです。意味ねぇー

というわけで地道に線を引いていきます。

「パス」とか「アンカー」とか「交差」とか出てくるけどどう違うのかよくわかりません。

ここまで線を引きます。

「多角形ツール」で描いた六角形は消しておきます。

すべての線を選択して「オブジェクト」→「パス」→「連結」

シャキーン！

最後に線を1本引いて、

「オブジェクト」→「パス」→「連結」

URYYYYYYY!

まとめ

つなぎ目がキレイになりました！

でもiPhoneで見れないから意味ねぇー

ちなみに明滅させることもできるのですが、ページが超重くなるので今回は見送りました。

この記事を書いた人
みやの
Web・DTP担当

Contact Us

ご意見、ご相談、料金のお見積もりなど、お気軽にお問い合わせください。

お問い合わせはこちら

TOP