
卒業生インタビュー
2021.03.03
【卒業生の声:森さん】文系の僕がプログラミングの道へ進むことは、不安も迷いもあった。今は、あの時思い切って良かったと心から思います
受講スクール プログラマカレッジ 受講期間 昼間コース(3ヶ月間) 料金 無料 就職先 株式会社イーゼ プログラマカレッジ卒業生の森さんにお話しをお伺いしました! 目次 開発学という観点からSDGsについて学んだ院生活。 […]
ITコラム
2017.03.18
svg要素は、SVGをHTMLにインラインで埋め込むための要素です。
SVGは、GIFやJPEG等とは異なり、画像を拡大・縮小しても画質が劣化せずに綺麗に表示することができる画像です。
今回は、SVGを埋め込むためのsvg要素についてまとめたいと思います。
1.SVGとは
2.svg要素
3.svg要素でSVGをHTMLに埋め込む
4.svg要素の属性と子要素
SVGとは Scalable Vector Graphics(スケーラブル ベクター グラフィクス)の略で、2次元ベクター形式のためのXMLベースのマークアップ言語です。
SVGは、GIF・JPEG・PNGとは異なり、ベクター画像のため、画像を拡大・縮小しても画質が劣化せずに綺麗に表示することができます。PC画面でも、スマートフォンでも、変わらず表示させることができるので、レスポンシブデザインととても相性の良い形式です。
SVGは、画像ファイルですが、テキストエディタで開くと、中身を見ることができます。例えば、次のようなソース(中身)となっています。
<?xml version=”1.0″ encoding=”iso-8859-1″?>
<!– Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) –>
<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN” “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”>
<svg version=”1.1″ id=”Capa_1″ xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink” x=”0px” y=”0px”
viewBox=”0 0 275.943 275.943″ style=”enable-background:new 0 0 275.943 275.943;” xml:space=”preserve”>
<path d=”M251.568,・・・,154.041z”/>
</svg>
Adobe Illustrator などのベクターグラフィックソフトを使用してベクター画像を作ると、自動的にマークアップ言語が生成されるので、上記のようなソース内容を理解する必要はありません。
SVGで書かれた画像は、拡張子.svgを付けてsvgファイルにできます。
ここでは、svg要素を使ってSVGをHTMLに埋め込む方法を紹介しますが、前述したsvgファイルを、他の画像ファイル(.jpgなど)のように、img要素やobject要素で HTMLに埋め込むこともできます。
<img src=”sample.svg” width=”50″ height=”50″>
<object data=”sample.svg” type=”image/svg+xml” width=”50″ height=”50″>
<img src=”sample.jpg” alt=”代替用JPG画像” width=”50″ height=”50″>
</object>
これらの方法に対して、svg要素でHTMLに埋め込む場合は、svgファイルを作るのではなく、svg要素内にSVGのコードを直接書いていきます。
svg要素は、SVGをHTMLにインラインで埋め込むための要素です。
使用する要素 : <svg> ~ </svg>
svg要素はインライン要素です。
svg要素の子要素として、g要素、rect要素、circle要素、path要素などがあり、これらは描画のために使用します。
また、svg要素の属性として、version属性、xmlns属性、viewBox属性などがあります。
ですが、これらは、ベクター画像を作成する際に、ベクターグラフィックソフト(Adobe Illustratorなど)が自動生成するソースコード内で使われるものなので、特に気にする必要はありません。
svg要素を使って、SVGをHTMLに埋め込む場合は、svg要素内にSVGのコードを直接書いていきます。
SVG(ベクター画像)の作成方法については、ここでは詳しく紹介しませんが、Adobe Illustratorなどのベクターグラフィックソフトで作成するか、画像変換ソフトで既存の画像ファイル(.jpgなど)をベクター画像に変換するか、ベクター画像ファイルを用意します。
用意したベクター画像ファイルを、テキストエディタで開くと、次のようなソースコードが表示されます。
<?xml version=”1.0″ encoding=”iso-8859-1″?>
<!– Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) –>
<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN” “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”>
<svg version=”1.1″ id=”Capa_1″ xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink” x=”0px” y=”0px”
viewBox=”0 0 275.943 275.943″ style=”enable-background:new 0 0 275.943 275.943;” xml:space=”preserve”>
<path d=”M251.568,・・・,154.041z”/>
</svg>
このコード内の<svg> ~ </svg>の部分を丸ごとコピーします。
そして、HTML上のSVG画像を置きたい場所にペーストします。
<body>
<svg version=”1.1″ id=”Capa_1″ xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink” x=”0px” y=”0px”
viewBox=”0 0 275.943 275.943″ style=”enable-background:new 0 0 275.943 275.943;” xml:space=”preserve”>
<path d=”M251.568,…..,154.041z”/>
</svg></body>
これで、埋め込み完了です。
SVGの中身のソースコードを書くことはないと思いますが、一応、svg要素の主な属性だけ一覧にまとめてみます。
version=”1.0″ または version=”1.1″ |
---|
SVG文書の仕様を指定 svg要素にのみ使用するお約束的なもの 2017年3月現在、最新バージョンは1.1 |
xmlns=”http://www.w3.org/2000/svg” |
XMLの名前空間宣言というもので、このXMLはSVGであることを明示するもの “http://www.w3.org/2000/svg”という値もお約束的なもの HTML5内で使う場合は、svg要素はSVGと決まっているので省略可能 |
width=”幅”、height=”高さ” |
svg要素の幅と高さを指定 単位(em ex px pt % など)をつけた数値で指定 単位がない場合はピクセルとなる レスポンシブにしたい場合は、指定不要 CSSでサイズを指定する場合も、指定不要 |
viewBox=”min-x min-y width height” |
描画の範囲を指定して、親要素に合わせてストレッチする 4つの数値(min-x、min-y、width、height)は、それぞれ半角スペースで区切る |
次に、svg要素の子要素についても、主なものを一覧にまとめてみました。
g要素 |
---|
オブジェクトをグループ化する要素 グループ化したオブジェクトをまとめてスタイル指定(塗り、線、線幅など)することもできる fill属性(塗り)、stroke属性(線の色)、stroke-width属性(線幅)などを指定 <g fill=”white” stroke=”blue” stroke-width=”5″> <circle cx=”25″ cy=”25″ r=”15″ /> <circle cx=”50″ cy=”25″ r=”15″ /> <circle cx=”75″ cy=”25″ r=”15″ /> </g> |
rectg要素 |
長方形を描く要素 属性を使ってx軸の基点、y軸の基点、幅、高さ、塗りや線などを指定 (rx属性・ry属性を使って角丸の四角形を描くことも可能) <rect width=”100″ height=”50″ fill=”pink” stroke=”green” stroke-width=”5″ /> |
circle要素 |
正円を描く要素 cx属性・cy属性で円の中心点の座標を、r属性で円の半径を指定 <circle cx=”25″ cy=”75″ r=”20″/> |
line要素 |
直線を描く要素 始点のxy座標をx1属性・y1属性で、終点のxy座標をx2属性・y2属性で指定 <line x1=”10″ x2=”50″ y1=”110″ y2=”150″/> |
path要素 |
あらゆる図形と、ベジェ曲線も描ける要素 d属性で1つのオブジェクトを作り、その中でMやLなどのコマンドを使用 Mは「Move to」、Lは「Line To」、Hは水平線、Vは垂直線、などのコマンドがあり、それぞれポイントのxy座標を指定 (ベジェ曲線の場合は制御点の座標も指定) <path d=”M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80″ stroke=”black” fill=”white”/> |
text要素 |
SVG画像の中にテキストを表示する要素 font-size属性でサイズ、font-weight属性で太さ、text-anchor属性で基点(x、yで指定した点)からどの方向に流すか、など細かく指定できる <text x=”0″ y=”30″ font-size=”30″ font-weight=”bold” fill=”blue”> TEXT </text> |
卒業生インタビュー
2021.03.03
受講スクール プログラマカレッジ 受講期間 昼間コース(3ヶ月間) 料金 無料 就職先 株式会社イーゼ プログラマカレッジ卒業生の森さんにお話しをお伺いしました! 目次 開発学という観点からSDGsについて学んだ院生活。 […]
スキルアップ
2021.03.03
プログラミング学習は「挫折しやすい」というイメージがありますよね。実際に学習を始めてみて、挫折しそうだと感じている方もいらっしゃるでしょう。本記事では、プログラミング学習で挫折する4つの原因を解説。さらに、プログラミング […]
スキルアップ
2021.03.02
未経験からプログラマーを目指しているものの「自分はプログラミングに向いているのかわからない」という不安から、プログラミング学習に踏み切れない人も多いでしょう。そこで本記事では、プログラミングに向いている人や向いていない人 […]
スキルアップ
2021.02.25
プログラミング初心者で、最速で技術を身につけたいと考えている人の悩みを解決します。 後述しますが、「1000時間ルール」という法則がありプログラミング初心者の方はまず1000時間の学習を目標にしましょう。今回は、プログラ […]
スキルアップ
2021.02.22
「プログラミングスクールが多すぎて選び方の基準がわからない」「スクール選びに失敗してお金も時間も無駄にすることだけはしたくない」そんな初心者の方に向けて、この記事では自分に合ったプログラミングスクールの選び方を解説します […]
プログラマハック
2021.02.19
フリーターからプログラマーになろうとしている方の中には「未経験者でも正社員として採用してもらえるか?」「自分は職歴なしのフリーターだけど、本当にプログラマーになれるのだろうか?」と不安を感じている方も多いはず。そこで今回 […]
INTERNOUS,inc. All rights reserved.