ロゴ（svg）を表示したいときのHTMLでの書き方。

Question

今現在、見本のコードを見ながら、サイト作成の練習をしています。
ロゴの（svg）を表示する方法は、ｊｐｇの方法とは異なるのか、見本では、
下記のようなコードになってます。

これらのコードの意味(特に数字の羅列)がわからず、また検索しても納得の行く答えが出ません。
SVGの表示方法について教えていただけると幸いです。

ググッタ結果として、下記サイトで、
https://www.codegrid.net/articles/2014-svg-basic-1/

おそらく、svg xmlns がｓｖｇを表示させるのに必要。

widthとheight属性が「窓」の大きさを決め、
viewBox属性「窓の中の座標」
ということはわかりました。

数字の羅列になんの意味があるのか、この羅列をどう出せばいいのか、教えていただけますと幸いです。

コード
<h1 class="site-title">
        <a href="./index.html">  
            <svg xmlns="http://www.w3.org/2000/svg" width="260" height="28.204" viewbox= "0 0 260 28.204">
                   <g id="site-logo" transform="translate(-59 -29)">
                   <path id="前面オブジェクトで型抜き_1" data-name="前面オブジェクトで型抜き 1" d="M14,35.2A13.9,13.9,0,0,1,6.785,33.19h8.848a14.228,14.228,0,0,0,8.847-2.739A13.97,13.97,0,0,1,14,35.2ZM4.822,31.752h0a14.17,14.17,0,0,1,0-21.3Zm10.54-3.117H10.33V13.771h5.032a8.094,8.094,0,0,1,5.682,1.994,7.233,7.233,0,0,1,2.138,5.439,7.234,7.234,0,0,1-2.138,5.439,8.093,8.093,0,0,1-5.682,1.99ZM25.007,12.39a13.9,13.9,0,0,0-9.373-3.174H6.463a13.932,13.932,0,0,1,13.76-.749,14.157,14.157,0,0,1,4.785,3.922Z" transform="translate(59 22)" fill="#fff"/>
                   <path id="DIGSMILE" d="M2.38-23.8H13.634a15.731,15.731,0,0,1,6.936,1.465,11.018,11.018,0,0,1,4.692,4.155,11.723,11.723,0,0,1,1.666,6.3,11.723,11.723,0,0,1-1.666,6.3A11.018,11.018,0,0,1,20.57-1.423,15.731,15.731,0,0,1,13.634.042H2.38ZM13.362-5.34a6.893,6.893,0,0,0,4.913-1.737,6.262,6.262,0,0,0,1.853-4.8,6.262,6.262,0,0,0-1.853-4.8,6.893,6.893,0,0,0-4.913-1.737H9.112V-5.34ZM30.634-23.8h6.732V.042H30.634ZM58.276-12.39h5.95v9.877A15.5,15.5,0,0,1,59.534-.265a18.642,18.642,0,0,1-5.3.783A14.166,14.166,0,0,1,47.5-1.065a11.8,11.8,0,0,1-4.692-4.411,12.18,12.18,0,0,1-1.7-6.4,12.18,12.18,0,0,1,1.7-6.4,11.747,11.747,0,0,1,4.726-4.411,14.514,14.514,0,0,1,6.834-1.584,15.2,15.2,0,0,1,5.984,1.124,11.536,11.536,0,0,1,4.42,3.236l-4.284,3.883a7.546,7.546,0,0,0-5.78-2.657,6.693,6.693,0,0,0-4.93,1.856,6.67,6.67,0,0,0-1.87,4.955,7.208,7.208,0,0,0,.85,3.525,6.1,6.1,0,0,0,2.38,2.418,6.969,6.969,0,0,0,3.5.868,8.588,8.588,0,0,0,3.638-.783ZM77.044.519A21.967,21.967,0,0,1,71.434-.2,13.786,13.786,0,0,1,67.014-2.1l2.21-4.973a14.289,14.289,0,0,0,3.706,1.7,14.086,14.086,0,0,0,4.148.647q3.876,0,3.876-1.941a1.607,1.607,0,0,0-1.105-1.516A20.3,20.3,0,0,0,76.3-9.222a33.866,33.866,0,0,1-4.488-1.243,7.554,7.554,0,0,1-3.094-2.129,5.758,5.758,0,0,1-1.292-3.951,6.848,6.848,0,0,1,1.19-3.934,7.965,7.965,0,0,1,3.553-2.776,14.6,14.6,0,0,1,5.8-1.022,20.415,20.415,0,0,1,4.624.528A14.146,14.146,0,0,1,86.6-22.2l-2.074,5.007a13.837,13.837,0,0,0-6.6-1.839,5.522,5.522,0,0,0-2.924.6,1.787,1.787,0,0,0-.918,1.55,1.536,1.536,0,0,0,1.088,1.43,19.646,19.646,0,0,0,3.5.988,32.762,32.762,0,0,1,4.5,1.243,7.779,7.779,0,0,1,3.094,2.112,5.646,5.646,0,0,1,1.309,3.934A6.714,6.714,0,0,1,86.394-3.3,8.114,8.114,0,0,1,82.824-.52,14.418,14.418,0,0,1,77.044.519ZM112.336.042l-.068-12.636-6.12,10.286h-2.992L97.07-12.253V.042H90.848V-23.8H96.39l8.364,13.76,8.16-13.76h5.542L118.524.042ZM123.454-23.8h6.732V.042h-6.732Zm11.7,0h6.732V-5.305h11.356V.042H135.15Zm40.018,18.63V.042H156.06V-23.8h18.666v5.211h-12v4.019H173.3v5.041H162.724v4.359Z" transform="translate(89 55)" fill="#fff"/>
                   <path id="INC." d="M1.54-15.4H5.9V0H1.54Zm22.22,0V0H20.174l-6.8-8.206V0H9.108V-15.4h3.586l6.8,8.206V-15.4ZM34.628.308A9.114,9.114,0,0,1,30.283-.715a7.65,7.65,0,0,1-3.025-2.849,7.858,7.858,0,0,1-1.1-4.136,7.858,7.858,0,0,1,1.1-4.136,7.65,7.65,0,0,1,3.025-2.849,9.114,9.114,0,0,1,4.345-1.023,9.326,9.326,0,0,1,3.806.748A7.323,7.323,0,0,1,41.25-12.8L38.478-10.3a4.56,4.56,0,0,0-3.63-1.8,4.48,4.48,0,0,0-2.233.55A3.817,3.817,0,0,0,31.1-10a4.773,4.773,0,0,0-.539,2.3A4.773,4.773,0,0,0,31.1-5.4,3.817,3.817,0,0,0,32.615-3.85a4.48,4.48,0,0,0,2.233.55,4.56,4.56,0,0,0,3.63-1.8L41.25-2.6A7.323,7.323,0,0,1,38.434-.44,9.326,9.326,0,0,1,34.628.308ZM45.1.2a2.462,2.462,0,0,1-1.782-.7,2.377,2.377,0,0,1-.726-1.782,2.35,2.35,0,0,1,.715-1.782A2.5,2.5,0,0,1,45.1-4.752a2.485,2.485,0,0,1,1.8.682,2.369,2.369,0,0,1,.7,1.782,2.4,2.4,0,0,1-.715,1.782A2.452,2.452,0,0,1,45.1.2Z" transform="translate(271.392 55.205)" fill="#fff"/>
                   </g>
            </svg>
        </a>
    </h1>

Comments

[m.ts10806]

コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564

あと、それぞれのタグや属性の役割については調べたのでしょうか？
（何をどう調べたのか書いてないので）

[meg_]

> また検索しても納得の行く答えが出ません。
具体的なサイトとその(納得出来なかった)解説があれば追記ください。

[2232]

納得がいかないのは、数字の羅列で、この数字に関することは、ググってもなかなか出てきませんでした。
「path id」と「g id」　についてです。

[m.ts10806]

質問本文にその記事URLを追記してください。
ネットの記事は嘘が書いてある可能性もありますし、嘘の場合は筆者に指摘する必要があります。

Answer 1

SVGの表示方法について

表示できていないのは色が「#fff」（白色）である為と思われます。

fill="#fff" となっている箇所が３か所あると思いますので、それを別の色に変えたら表示できるかと思います。
試しに、それぞれ fill="#f00" fill="#0f0" fill="#00f" に変更してみた所、ロゴが表示されることを確認しました。

納得がいかないのは、数字の羅列で、この数字に関することは、ググってもなかなか出てきませんでした。
「path id」と「g id」　についてです。

path / g 要素ともに id="～" はオブジェクトにつけられた名前です。
path 要素の d="～" で書かれている部分が描画コマンドになります。
g タグはグループ化する際に使用される要素です。

参考までに ロゴの最初の１文字目（path）を展開すると、以下のようになります。

M 14,35.2
A 13.9,   13.9,   0, 0, 1, 6.785, 33.19
h 8.848
a 14.228, 14.228, 0, 0, 0, 8.847-2.739
A 13.97,  13.97,  0, 0, 1, 14,35.2
Z

M / A / h / Z 等が描画コマンドになります。
M が Move To（移動）
A が Arc（円弧）
h が 水平線の描画
Z パスを閉じる

といった使い方になります。コマンドに大文字と小文字があるのは大文字が絶対座標、小文字が相対座標といった使い方になります。

簡易的な説明は、

■ SVG入門 - とほほのWWW入門
https://www.tohoho-web.com/ex/svg.html

を参照下さい。もう少し専門的な説明は、こちらを見た方が良いかと思います。

■ svg要素の基本的な使い方まとめ
http://defghi1977.html.xdomain.jp/tech/svgMemo/svgMemo_03.htm

Comments

[2232]

ありがとうございます、よく分かりました。
あまりにも長い数字の羅列で、勉強が大変そうですね、

[cx20]

簡単な基本図形なら手で書くこともできるかもしれないですが、複雑なものはツールを使うことになるかと思います。
提示されているサンプルで使用されている「前面オブジェクトで型抜き～」はググってみた感じだとIllustratorで作成しているようですね。
https://www.hrs-career.com/illustrator-moji-katanuki/

Answer 2

SVGはベクターグラフィックスです。詳しくはこちら。

ビットマップとは？ベクターとは？画像形式の意味と違いを図解

で、提示のHTMLコードでは、ベクター描画のデータをsvgタグで記述しています。

もしSVGデータが*.svgファイルとしてあって、それをHTMLで描画したいだけならJPEG等と同様にimgタグで可能です。下記ページを参照してください。

HTML5でのSVGファイル操作のおさらい - Qiita

補記
SVGデータを編集したり書き出したりするにはAdobe Illustratorのプラグインを使ったりとか、フリーのソフトもいろいろあるようですので、SVG 編集 書き出し などのキーワードで探してみるといいと思います。

Answer 3

書き出したSVG形式の画像(SVGのパス座標や色が記述されたテキストデータ)をそのままHTMLに記述する方法。
については、下記のサイトに詳しく書いてありました。

見本のコードの数字の羅列は、おそらくこのようにして、作成していたのだと思います。

https://gray-code.com/html_css/markup-for-svg-file/

Comments

[cx20]

> 書き出したSVG形式の画像(SVGのパス座標や色が記述されたテキストデータ)

残念ながら SVG形式の画像自体をどのように作っているかまではそのサイトには書かれていないようですね。
ロゴを作成するのに手で数字を羅列しているとも思えないので（無理だとは言いませんが）、おそらくは何かしらのツールを使って作成しているものと思われます。（「書き出した」というくらいなので、やはり別ツールで出力しているのだと思います。）