前提・実現したいこと

deSVGを使用して、画像の色を塗り替えようと思い、<img>タグに設定したpngをsvgに変換し、画像の色のぬりかえを適用したいです。

以前に一度は成功したことはあるのですが、今回はじめて画像そのものが表示されない状況になりました。
ぜひご教授よろしくお願いいたします。

発生している問題・エラーメッセージ

svg画像が表示されない

該当のソースコード

HTML
1<!DOCTYPE html>
2<html>
3  <body>
4    <script type="text/javascript">
5      (function(add, cla){window['UserHeatTag']=cla;window[cla]=window[cla]||function(){(window[cla].q=window[cla].q||[]).push(arguments)},window[cla].l=1*new Date();var ul=document.createElement('script');var tag = document.getElementsByTagName('script')[0];ul.async=1;ul.src=add;tag.parentNode.insertBefore(ul,tag);})('//uh.nakanohito.jp/uhj2/uh.js', '_uhtracker');_uhtracker({id:'uh7EsByhxp'});
6      
7      
8    </script>
9    <head> 
10      <link rel="stylesheet" href="../src/css/reset.css"/>
11      <link rel="stylesheet" href="css/style.css"/>
12      <link rel="stylesheet" href="css/header.css"/>
13      <link rel="stylesheet" href="css/tab.css"/>
14      <link rel="stylesheet" href="css/sp.css"/>
15      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
16      <script src="../dest/js/main.js"></script>
17      <link rel="preconnect" href="https://fonts.gstatic.com"/>
18      <meta name="viewport" content="width=device-width,initial-scale=1"/>
19    </head>
20    <main> 
21      <header>
22        <div class="header-inner">
23          <nav class="header-nav flex-box"><a href="#"><img class="logo" src="../img/top-header-logo.svg"/></a>
24            <div class="header-wrapper"> <a href="#">お部屋</a><a href="#">お料理</a><a href="#">温泉</a></div>
25          </nav><a class="header-btn" href="#"> <img class="carender-img" src="../img/calender-min.png"/>
26            <p>宿泊予約</p></a>
27        </div>
28      </header>
29   (中略)
30    <script src="//cdn.jsdelivr.net/npm/desvg@1.0.2/desvg.min.js"></script>
31  </body>
32</html>

該当のソースコード

CSS
1ソースコード

該当のソースコード

SCSS
1.logo{
2  padding-right:6vw;
3}
4
5.black{
6  .logo path {
7    fill: #ffff00; /* 塗りつぶしの色 */
8    stroke: #ff0000; /* 枠線の色 */
9  }
10}
11

該当のソースコード

js
1//ハンバーガーメニュ
2
3/* document.querySelector('.burger-musk').style[display] = 'none'; */
4
5$(function() {
6    var imgHeight = $('.fv-img').outerHeight();
7    //トップ画像の高さを取得
8    var bgHeight = $('.fv-wrapper').outerHeight();
9    //ファーストビュー全体の高さを取得
10 
11//imgをsvg化する
12window.addEventListener('load', function(){
13    deSVG('.logovision', true);
14  });
15
16//スクロールした時に文字色を変化させる
17$(window).on('load scroll', function () {
18    if ($(window).scrollTop() < imgHeight - 50) {
19        $('.site-logo').removeClass('black');
20    } else {
21        $('.site-logo').addClass('black');
22    
23    }
24    
25  if ($(window).scrollTop() < bgHeight - 50) {
26    //メインビジュアル内にいるならクラスを外す
27      $('.burger-btn').removeClass('black');
28      $('.header-wrapper').removeClass('js-scrolled');
29      $('header').removeClass('js-scrolled');
30   } else {
31    //そうではなく、メインビジュアル外にいたらクラスを付けて色を変える
32      $('.burger-btn').addClass('black');
33      $('.header-wrapper').addClass('js-scrolled');
34      $('header').addClass('js-scrolled');
35   }
36});
37});
38//document.querySelector('.burger-musk').style.display = 'none';
39    //
40    alert('OK');
41//////この記述をしてOKが出ればこれより前の箇所に異常はない

試したこと

pngの拡張子を手動でsvgに書き換える
→表示されなくなった

コンバーター？（png→svg変換サイト）を利用しての変換
→変わらず表示されない。pngの時はgulpの機能のおかげか圧縮のminがついていたので、その成果と思ったがminなしの圧縮していないsvgにしてもダメでした。

以前に一度成功したことのある自身のコードを観察・必要な個所を書き換えて試してみる
→見落としがなければ同様にやっているつもりだが、代わらず表示されない
違いがあるとすれば前回はgulpやpug等は使用していないこと。
画像を入れているフォルダ名が若干違い、「img」フォルダ[image]フォルダであること。
前回はなかったのに対し、今回はg要素がsvgの下層にできてしまっていること。（調べたところグループのようだが、前回同様svgにしたのは一つしかない）

クロームでsvgが表示されない
→このような記事も見かけましたが、該当箇所が見つけられないのと、そもそも前回同じツールを利用した際にこのような処理をしていないが成功して記憶があるので関係は低いと考えています。

この一番左側の幅がロゴなので存在はしているものと思われます。

補足情報（FW/ツールのバージョンなど）

OS:Windows
エディタ:VScode
ブラウザ:クローム

ikadzuchi

2021/06/30 13:51

塗り替えない元のSVGは表示されますか? また、そのSVGはテキストエディタで開くとどのような内容ですか?

mitrasi

2021/06/30 20:53

元画像はそもそもsvgではなく、手動で拡張子を書き換えたり、ネット上の変換サイトでsvgに変換されたものになります。pngの形式の時は問題なく表示されておりました。テキストエディタで開くとどのような内容というのは、cssでしょうか？それとも<img>タグ部分のhtmlのことでしょうか？

行動規範の内容に同意します

回答1件

まずはベクターデータとビットマップデータの違いを理解してください。

ベクターとビットマップの違い

svgはベクターデータと言われている画像で、座標の中で点と点を結びつけて線が描画されるようなデータになっており、ファイルはテキストファイルになっています。

jpgやpngはビットマップデータと言われている画像で、ドットの集合体で描画されるようになっており、ファイルはバイナリーファイルになっています。

SVGの使い方

以下、適当なsvgのサンプルデータです。ファイルの中身はこのようなテキストデータになっています。
適当なファイル名で拡張子はsvgにしてブラウザで表示してみて下さい。イラストが描画されます。

svg
1<svg version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="width: 256px; height: 256px; opacity: 1;" xml:space="preserve">
2<style type="text/css">
3	.st0{fill:#4B4B4B;}
4</style>
5<g>
6	<path class="st0" d="M378.409,0H208.294h-13.176l-9.314,9.315L57.017,138.101l-9.314,9.315v13.176v265.513
7		c0,47.36,38.528,85.896,85.895,85.896h244.811c47.361,0,85.888-38.535,85.888-85.896V85.896C464.297,38.528,425.77,0,378.409,0z
8		 M432.493,426.104c0,29.877-24.214,54.091-54.084,54.091H133.598c-29.877,0-54.091-24.214-54.091-54.091V160.592h83.717
9		c24.884,0,45.07-20.179,45.07-45.071V31.804h170.114c29.87,0,54.084,24.214,54.084,54.091V426.104z" style="fill: rgb(75, 75, 75);"></path>
10	<path class="st0" d="M180.296,296.668l-4.846-0.67c-10.63-1.487-14.265-4.978-14.265-10.104c0-5.78,4.309-9.817,12.383-9.817
11		c5.653,0,11.305,1.62,15.745,3.764c1.886,0.942,3.903,1.487,5.789,1.487c4.845,0,8.612-3.63,8.612-8.616
12		c0-3.226-1.481-5.921-4.71-7.939c-5.384-3.372-15.476-6.06-25.572-6.06c-19.781,0-32.436,11.171-32.436,27.998
13		c0,16.15,10.232,24.898,28.938,27.454l4.846,0.67c10.903,1.48,14.129,4.846,14.129,10.229c0,6.326-5.247,10.766-14.939,10.766
14		c-6.727,0-12.111-1.745-19.645-5.921c-1.616-0.942-3.634-1.62-5.788-1.62c-5.115,0-8.885,3.91-8.885,8.756
15		c0,3.226,1.616,6.326,4.713,8.344c6.054,3.764,15.878,7.8,28.798,7.8c23.823,0,35.934-12.24,35.934-28.795
16		C209.097,307.84,199.273,299.356,180.296,296.668z" style="fill: rgb(75, 75, 75);"></path>
17	<path class="st0" d="M281.108,259.382c-4.577,0-7.939,2.43-9.556,7.674l-16.69,54.51h-0.402l-17.634-54.51
18		c-1.745-5.244-4.978-7.674-9.551-7.674c-5.653,0-9.692,4.176-9.692,9.287c0,1.347,0.269,2.834,0.67,4.175l23.286,68.104
19		c2.96,8.477,6.727,11.57,12.652,11.57c5.785,0,9.555-3.093,12.516-11.57l23.282-68.104c0.406-1.341,0.674-2.828,0.674-4.175
20		C290.664,263.558,286.76,259.382,281.108,259.382z" style="fill: rgb(75, 75, 75);"></path>
21	<path class="st0" d="M364.556,300.836h-18.841c-5.114,0-8.344,3.1-8.344,7.806c0,4.713,3.23,7.814,8.344,7.814h6.193
22		c0.538,0,0.803,0.258,0.803,0.803c0,3.505-0.265,6.598-1.075,9.014c-1.882,5.796-7.67,9.426-14.669,9.426
23		c-7.943,0-12.921-3.903-14.939-10.096c-1.075-3.365-1.48-7.8-1.48-19.648c0-11.842,0.405-16.15,1.48-19.516
24		c2.018-6.325,6.867-10.228,14.67-10.228c5.924,0,10.362,1.885,13.859,6.724c2.695,3.777,5.387,4.852,8.749,4.852
25		c4.981,0,9.021-3.638,9.021-8.888c0-2.151-0.674-4.035-1.752-5.921c-4.842-8.204-15.071-14.264-29.877-14.264
26		c-16.287,0-28.935,7.408-33.644,22.204c-2.022,6.466-2.559,11.576-2.559,25.038c0,13.454,0.538,18.573,2.559,25.031
27		c4.709,14.802,17.357,22.204,33.644,22.204c16.286,0,28.668-8.204,33.374-22.881c1.617-5.111,2.29-12.645,2.29-20.716v-0.95
28		C372.362,303.664,369.538,300.836,364.556,300.836z" style="fill: rgb(75, 75, 75);"></path>
29</g>
30</svg>
31

SVGはimgタグで呼び出して表示することもできるし、htmlに直接記述することもできます。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- imgタグで呼び出し -->
    <img src="hoge.svg" alt="">
    <!-- htmlに直書き -->
    <svg>
        〜省略〜
    </svg>
</body>
</html>

結論

deSVGはビットマップデータをベクターデータに変えるようなライブラリではなく、
imgで呼び出しているsvgファイルをhtmlに直書きで展開するというライブラリです。

なのでdeSVGを使用するには真っ当なsvg画像用意しないと反応しないと思われます。

投稿2021/06/30 16:00

編集2021/06/30 16:02

runnynose

総合スコア497

mitrasi

2021/06/30 20:51 編集

ご回答ありがとうございます。拡張子を変えたからといって、最初から描かれた描き方が帰られるわけではないのですね???? 前回のときも最初からsvgだったわけじゃないものを変換して使っていた気がしたので勘違いしておりました。。では、最初からsvg形式でない限りpng/jpegをdeSVGで利用するのは不可能ということでよろしかったでしょうか？