SVG へ

SVGとは何ですか?おそらく多くの人が SVG について聞いたことがあると思いますが、必ずしも SVG が何であるかを知っているわけではありません。 SVG (Scalable Vector Graphics 理解できない英語がたくさん ) XML 形式で定義されたスケーラブル ベクター グラフィックス Web 用のベクターベースのグラフィックスであり、画像を拡大したりサイズを変更したりしてもグラフィック品質が損なわれないことが特徴であり、同時に DOM と同様に W3C 規格でもあります。

ビットマップとベクターグラフィックスについてはここで説明されています:

私たちがよく見る絵であるビットマップは、店舗を平面上に密に並べたもの、つまり点で構成されています。また、拡大すると対応する箇所も拡大されてしまい、非常に不鮮明で粗い写真になってしまいます。

オブジェクト指向イメージまたは描画イメージとも呼ばれるベクター イメージは、線で接続された一連の点として数学的に定義されます。ベクター ファイル内のグラフィック要素はオブジェクトと呼ばれます。各オブジェクトは、色、形状、輪郭、サイズ、画面の位置などのプロパティを備えた自己完結型のエンティティです。解像度に関係なく、拡大しても画像が歪まないのが特徴で、グラフィックデザイン、文字デザイン、一部のロゴデザイン、レイアウトデザインなどに適しています。ベクター グラフィック形式には、CGM、SVG、AI (Adobe Illustrator)、CDR (CorelDRAW)、PDF、SWF、VML などが含まれます。

(追記: このエッセイの下の内容の一部は W3Cschool からのものです)

シンプルなSVG

リーリー

SVGコード分析:

最初の行には XML 宣言が含まれています。スタンドアロン属性に注意してください。このプロパティは、この SVG ファイルが「スタンドアロン」であるか、または外部ファイルへの参照が含まれているかを指定します。 standalone="no" は、SVG ドキュメントが外部ファイル (この場合は DTD ファイル) を参照することを意味します。

2 行目と 3 行目は、この外部 SVG DTD を参照しています。 DTD は「http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd」にあります。この DTD は W3C にあり、許可されているすべての SVG 要素が含まれています。

SVG コードは、開始タグ を含む

SVGのを使用して円を作成します。 cx プロパティと cy プロパティは、円の中心の x 座標と y 座標を定義します。これら 2 つのプロパティを省略した場合、ドットは (0, 0) に設定されます。 r 属性は円の半径を定義します。

ストローク プロパティとストローク幅プロパティは、図形の輪郭がどのように表示されるかを制御します。円の輪郭を幅 2 ピクセルに設定し、黒い境界線を付けます。 fill プロパティは、形状内の色を設定します。塗りつぶしの色を赤に設定します。

終了タグは SVG 要素とドキュメント自体を閉じます。

注: すべての開始タグには終了タグが必要です。

SVGの利点

SVG は多くのツールで読み取り、変更できます (メモ帳でも簡単に開いて変更できます)
SVG は JPEG や GIF 画像よりもサイズが小さく、圧縮率が高くなります。
SVGはスケーラブルです
SVG画像はどの解像度でも高品質で印刷できます
SVGは画質を損なうことなく拡大できます
SVG 画像内のテキストはオプションで検索可能です (地図の作成に最適です)
SVG は Java などのテクノロジーで実行できます
SVG はオープンスタンダードです
SVG ファイルは純粋な XML です

SVG ファイルは、、