SVGの表示がおかしい

Question

前提

VScodeで模写コーディングを行っています。
SVG画像をサーバー上にアップした際にCSSのスタイルが全く効いておらず困っています。
状態の写真↓

お手本のサイト：https://code-step.com/demo/html/photo/

該当のソースコード

 <header>
            <a href="#"><svg role=“img” width="165" height="30" viewBox="0 0 1400 155" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M0 152.092V2.64999H56.373C66.293 2.64999 73.871 3.12699 79.104 4.07799C86.444 5.30099 92.594 7.62999 97.555 11.06C102.515 14.493 106.508 19.301 109.533 25.485C112.555 31.67 114.069 38.465 114.069 45.872C114.069 58.581 110.026 69.335 101.94 78.136C93.85 86.938 79.241 91.338 58.106 91.338H19.776V152.092H0V152.092ZM19.775 73.702H58.411C71.186 73.702 80.258 71.323 85.628 66.566C90.997 61.809 93.681 55.115 93.681 46.484C93.681 40.232 92.1 34.88 88.94 30.428C85.78 25.978 81.616 23.037 76.453 21.611C73.123 20.728 66.972 20.286 58.001 20.286H19.775V73.702Z" fill="#333333"/>
                <path d="M139.859 152.092V2.64999H159.635V64.017H237.312V2.64999H257.087V152.091H237.312V81.652H159.635V152.091H139.859V152.092Z" fill="#333333"/>
                <path d="M288.174 79.309C288.174 54.504 294.834 35.085 308.154 21.051C321.473 7.019 338.667 0 359.735 0C373.53 0 385.967 3.298 397.044 9.889C408.12 16.482 416.565 25.673 422.376 37.463C428.187 49.254 431.092 62.626 431.092 77.575C431.092 92.73 428.033 106.288 421.917 118.249C415.801 130.21 407.136 139.265 395.924 145.415C384.71 151.565 372.613 154.641 359.633 154.641C345.566 154.641 332.992 151.243 321.916 144.447C310.837 137.653 302.445 128.376 296.737 116.618C291.029 104.86 288.174 92.425 288.174 79.309ZM308.562 79.614C308.562 97.624 313.405 111.811 323.089 122.173C332.773 132.537 344.92 137.719 359.531 137.719C374.415 137.719 386.662 132.488 396.281 122.02C405.896 111.556 410.704 96.707 410.704 77.474C410.704 65.309 408.647 54.69 404.537 45.618C400.425 36.547 394.411 29.512 386.494 24.517C378.577 19.522 369.69 17.024 359.838 17.024C345.838 17.024 333.792 21.834 323.701 31.449C313.608 41.065 308.562 57.121 308.562 79.614Z" fill="#333333"/>
                <path d="M490.425 152.092V20.286H441.188V2.64999H559.639V20.286H510.2V152.092H490.425Z" fill="#333333"/>
                <path d="M570.14 79.309C570.14 54.504 576.798 35.085 590.119 21.051C603.438 7.019 620.632 0 641.7 0C655.494 0 667.93 3.298 679.009 9.889C690.085 16.482 698.531 25.673 704.34 37.463C710.153 49.254 713.057 62.626 713.057 77.575C713.057 92.73 709.998 106.288 703.881 118.249C697.767 130.21 689.102 139.265 677.889 145.415C666.676 151.565 654.578 154.641 641.598 154.641C627.53 154.641 614.957 151.243 603.881 144.447C592.803 137.653 584.411 128.376 578.702 116.618C572.994 104.86 570.14 92.425 570.14 79.309ZM590.526 79.614C590.526 97.624 595.369 111.811 605.053 122.173C614.738 132.537 626.883 137.719 641.495 137.719C656.378 137.719 668.627 132.488 678.243 122.02C687.858 111.556 692.667 96.707 692.667 77.474C692.667 65.309 690.61 54.69 686.501 45.618C682.388 36.547 676.374 29.512 668.458 24.517C660.54 19.522 651.654 17.024 641.8 17.024C627.8 17.024 615.756 21.834 605.664 31.449C595.572 41.065 590.526 57.121 590.526 79.614Z" fill="#333333"/>
                <path d="M812.43 152.092V2.64999H868.496C879.912 2.64999 889.069 4.16399 895.968 7.18699C902.864 10.211 908.268 14.867 912.177 21.153C916.084 27.439 918.038 34.014 918.038 40.877C918.038 47.267 916.306 53.281 912.84 58.921C909.373 64.562 904.14 69.114 897.14 72.58C906.179 75.23 913.127 79.752 917.988 86.138C922.845 92.527 925.277 100.071 925.277 108.769C925.277 115.769 923.798 122.275 920.842 128.29C917.885 134.306 914.23 138.942 909.884 142.205C905.532 145.466 900.078 147.931 893.521 149.596C886.963 151.262 878.928 152.093 869.415 152.093H812.43V152.092ZM832.206 65.444H864.519C873.287 65.444 879.572 64.868 883.378 63.711C888.405 62.218 892.196 59.736 894.744 56.272C897.292 52.804 898.566 48.457 898.566 43.223C898.566 38.262 897.378 33.895 894.999 30.124C892.619 26.351 889.223 23.77 884.807 22.376C880.388 20.983 872.81 20.286 862.074 20.286H832.206V65.444ZM832.206 134.457H869.414C875.8 134.457 880.286 134.22 882.869 133.742C887.421 132.928 891.227 131.569 894.286 129.665C897.344 127.764 899.857 124.993 901.83 121.357C903.801 117.723 904.786 113.525 904.786 108.768C904.786 103.197 903.358 98.354 900.505 94.242C897.651 90.131 893.691 87.243 888.629 85.577C883.566 83.913 876.275 83.08 866.764 83.08H832.206V134.457V134.457Z" fill="#333333"/>
                <path d="M946.479 79.309C946.479 54.504 953.138 35.085 966.458 21.051C979.776 7.019 996.972 0 1018.04 0C1031.83 0 1044.27 3.298 1055.35 9.889C1066.43 16.482 1074.87 25.673 1080.68 37.463C1086.49 49.254 1089.4 62.626 1089.4 77.575C1089.4 92.73 1086.34 106.288 1080.22 118.249C1074.1 130.21 1065.44 139.265 1054.23 145.415C1043.01 151.565 1030.92 154.641 1017.94 154.641C1003.87 154.641 991.296 151.243 980.22 144.447C969.142 137.653 960.75 128.376 955.04 116.618C949.332 104.86 946.479 92.425 946.479 79.309ZM966.865 79.614C966.865 97.624 971.707 111.811 981.391 122.173C991.076 132.537 1003.22 137.719 1017.83 137.719C1032.72 137.719 1044.97 132.488 1054.58 122.02C1064.2 111.556 1069.01 96.707 1069.01 77.474C1069.01 65.309 1066.95 54.69 1062.84 45.618C1058.73 36.547 1052.71 29.512 1044.8 24.517C1036.88 19.522 1027.99 17.024 1018.14 17.024C1004.14 17.024 992.095 21.834 982.003 31.449C971.91 41.065 966.865 57.121 966.865 79.614Z" fill="#333333"/>
                <path d="M1108.86 79.309C1108.86 54.504 1115.52 35.085 1128.84 21.051C1142.16 7.019 1159.36 0 1180.43 0C1194.22 0 1206.66 3.298 1217.74 9.889C1228.81 16.482 1237.26 25.673 1243.07 37.463C1248.88 49.254 1251.78 62.626 1251.78 77.575C1251.78 92.73 1248.72 106.288 1242.61 118.249C1236.49 130.21 1227.83 139.265 1216.61 145.415C1205.4 151.565 1193.3 154.641 1180.32 154.641C1166.26 154.641 1153.68 151.243 1142.61 144.447C1131.53 137.653 1123.14 128.376 1117.43 116.618C1111.72 104.86 1108.86 92.425 1108.86 79.309ZM1129.25 79.614C1129.25 97.624 1134.1 111.811 1143.78 122.173C1153.46 132.537 1165.61 137.719 1180.22 137.719C1195.1 137.719 1207.35 132.488 1216.97 122.02C1226.58 111.556 1231.39 96.707 1231.39 77.474C1231.39 65.309 1229.34 54.69 1225.23 45.618C1221.11 36.547 1215.1 29.512 1207.18 24.517C1199.27 19.522 1190.38 17.024 1180.53 17.024C1166.53 17.024 1154.48 21.834 1144.39 31.449C1134.3 41.065 1129.25 57.121 1129.25 79.614Z" fill="#333333"/>
                <path d="M1276.45 152.092V2.64999H1296.23V76.76L1370.44 2.65099H1397.25L1334.56 63.203L1400 152.093H1373.9L1320.69 76.455L1296.23 100.309V152.093H1276.45V152.092Z" fill="#333333"/>
                </svg>
                </a>
        </header>

header a svg{
    width: 165px;
    margin: 60px 0 10px;
}

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

サーバーはXfreeを使用しています。

Comments

[Cocode]

提示してくださっているコードをコピペしただけですが、ローカルでは問題なくCSSが適用されています。

確認なのですが、
お手本のサイトは外部svgデータをimgタグで読み込まれていますが、質問者様は実際にはどのようにsvg画像を利用されていますか？

お手本通り、外部svgデータでしょうか？
それとも提示してくださっているコードのようにインラインsvgでしょうか？

よろしくお願いいたします。

[kanako000]

imgタグで読み込むと表示されないのでインラインで使用しています

[Cocode]

なるほどです！表示されないと言うのは、srcのパスが間違っているのだと思います。

もしよろしければ、そのアップロードしたサーバーのURLを教えていただくことは可能でしょうか？
現在推測される原因としては、諸所でパスの書き方が間違っているのだと思います。
実際のWebページを拝見して、ブラウザの開発者ツールで確認させていただければ幸いです。

提示されているコードだけでは不具合を再現できず原因究明もできませんので、ご検討くださいませ🙇

[kanako000]

basic認証　名前：mizuhashi　パス：a12345678
testb000.html.xdomain.jp

↑こちらになります……。よろしくお願いします。

[Cocode]

拝見します！ありがとうございます

[Cocode]

style.cssをみたら、
header a img{
width: 165px;
margin: 60px 0 18px;
}

になっているので、

header a svg

に修正したらきくのではないでしょうか？
cssファイルアップロードし忘れかな？

[kanako000]

ありがとうございます……
svgにしても勝手にimgに変えられてしまうみたいです……

[Cocode]

アップロードしているフォルダはあっていますか？
キャッシュをクリアしてブラウザを更新していますか？

私がよくするミスは、cssフォルダの中にstyle.cssをアップロードしないといけないのに、ホームディレクトリにアップロードしてたり…

[kanako000]

キャッシュをクリアしてブラウザ更新したら治りました！

[Cocode]

よかったですー！

Answer 1

キャッシュが残っていいたために古いstyle.css（header a img {...}）が効いていたので、キャッシュクリアでブラウザを更新して解決。

Comments

[kanako000]

ありがとうございました。これからキャッシュなどは特に気を付けようと思います！