【打倒Retinaその1】劣化知らず!伸縮自在のベクター画像『SVG』

2014年8月29日

Pocket

svg1

MacBook Pro Retinaモデルがアップデートされ、MacBook AirのRetinaモデルやiMacの4Kモデルの発売が噂されている中、PCのRetina対策がされたwebサイトはまだまだ少ないです。
スマホでもPCでもRetina対策をするためにはどんな方法があるでしょうか?
 
 

【打倒Retinaその1】SVG画像
 
先日、4年愛用していた『13インチMacBook Pro』が完全に死亡したので『13インチMacBook Pro Retinaディスプレイモデル』を購入しました。
iPhoneとiPad miniのRetinaディスプレイモデルはすでに持っていてRetinaの解像度は知っていたのですが、13インチのRetinaは目が疲れるほど高解像度です。
そして何よりも驚いたのが、、、今まで愛していたwebサイトたちが汚い!画像が荒れまくっているのです。
 
参考:https://www.apple.com/jp/macbook-pro/features-retina/#retina ←こんなんです。
 
それ以来、PC版のwebサイトで画像を使うのが怖くなってしまいました。

これはマズいので、早速対応策を考えました。
第一の救世主は、『SVG』
 
“Scalable Vector Graphics(スケーラブル・ベクター・グラフィックス、SVG)は、XMLをベースとした、2次元ベクターイメージ用の画像形式の1つである。”
wikipedia内『Scalable Vector Graphics』より引用
 
ベクターイメージとは、ざっくりと言ってしまえば、引き延ばしても画質が劣化しない画像形式です。
 
今回、SVGの基本的な使い方を紹介します!
 
SVGはHTMLの中に記述します。 
SVGタグを表示したい場所に配置し、タグの中に要素を書いていくだけです。 

<!DOCTYPE html>
<html>
<body>
<svg width="200" height="200">
   描きたい要素を書く
</svg>
</body>
</html>

SVGタグに「width」と「height」で描画領域を指定します。 
 
JavaScriptを使用しないでも、(個人的にはJavaScripより簡単に)アニメーションの実装もできます。 
SVGでのアニメーションはまた今度、記述していきます。 
今回はSVG入門ということで、図形の描画方法をまとめてみました。
 

基本的なタグ

SVGでは図形を描画する用のタグが用意されています。

rect 四角形を描画
circle 円形を描画
ellipse 楕円形を描画
line 直線を描画
polyline 折れ線を描画
polygon 多角形を描画
path パスを描画

 

基本的な属性

x svgタグを基準としたX座標の位置を指定
y svgタグを基準としたY座標の位置を指定
width 幅指定
height 高さ指定
fill 塗りつぶしの色を指定
stroke 線の色を指定
stroke-width 線幅を指定

 
描画タグに属性を記述しいていき、図形の色やサイズなどを指定行きます。 
cssの記述方法に似ているかな〜って思います。 

四角

<svg width="200" height="200">
   <rect x="50" y="50" width="100" height="100" fill="none" stroke="black" stroke-width="3"/>
</svg>

SVG描画領域の左端から、x軸に(右に)図形の左端が50、
SVG描画領域の上端から、y軸に(下に)図形の上端50の位置に
幅100、
高さ100
の四角を描画しています。

<svg width="200" height="200">
   <circle cx="100" cy="100" r="50" fill="none" stroke="black" stroke-width="3"/>
</svg>

「cx」:円の中心点のX座標
「cy」:円の中心点のY座標
「r」:円の半径
 
四角は図形の左上端が座標の点でしたが、円の場合は四角と違い円の中心が座標の点になります。
SVG描画領域の左端から、x軸に(右に)円の中心(半径)が100、
SVG描画領域の上端から、y軸に(下に)円の中心(半径)が100の位置に
半径50
の円を描画しています。

楕円

<svg width="200" height="200">
   <ellipse cx="100" cy="100" rx="60" ry="30" fill="none" stroke="black" stroke-width="3"/>
</svg>

「rx」:X軸に向かう円の半径
「ry」:Y軸に向かう円の半径

 
 
四角や円などの記述ならcssでかくのとあんまり変わらなくないか?と思いますが、SVGのいいところは線や曲線をパスで描画できることがいいところだと私は思います。 
以下はかなり簡単ですがパスを引いて図形を描いてみました。 

<svg width="200" height="200">
   <line x1="50" y1="50" x2="150" y2="150" stroke-width="3" stroke="black"/>
</svg>

「x1,y1」:開始点
「x2,y2」:終了点
 
線を描画する時は点と点を結んでいく感じで、
x軸50、y軸50の位置から、x軸150、y軸150の位置を結ぶ線を描きます。

折れ線

<svg width="200" height="200">
   <polyline points="50 100 80 130 110 100 140 130 170 100" stroke="black" stroke-width="3" fill="none"/>
</svg>

「points」:x y の順に表記。各点をつないでいく

三角

<svg width="200" height="200">
   <polygon points="100 50 50 100 150 100" stroke="black" stroke-width="3" fill="none"/>
</svg>

開始点から終了点を結ぶ図形を描画

矢印

<svg width="200" height="200">
   <path d="M 100 50 l 50 50 l -35 0 l 0 50 l -30 0 l 0 -50 l -35 0 z" stroke="black" stroke-width="3" fill="none"/>
</svg>

「d」:コマンド x y の順に表記。各点をつないでパスを描いていく

角丸四角

<svg width="200" height="200">
   <path
      d="M 50 50 L 130 50 Q 130 50 150 50 T 170 70
      L 170 120 Q 170 120 170 140 T 150 160
      L 70 160 Q 70 160 50 160 T 30 140
      L 30 90 Q 30 90 30 70 T 50 50" 
      fill="none" stroke="black" stroke-width="3"/>
</svg>

基本的なコマンド

M,m 開始位置
L,l 直線
H,h 水平線
V,v 垂直線垂直線
C,c,S,s,Q,q,T,t 曲線
A,a 円弧
Z,z 開始位置までの直線

大文字は絶対位置
小文字は相対位置

補足

SVGは引き延ばしても劣化しない素晴らしい画像形式ですが、
写真などには向いておらず、基本的にべた塗りの画像(この記事のサムネのような)に向いています。
 
 
【打倒Retinaその2】SVG入門〜いろいろなスタイル指定〜
【打倒Retinaその3】SVG入門〜すぐに使える簡単アニメーション〜

このサイトについて


『意識低い系女と高い系男の一年戦争』はクリエイティブ会社エアゼの代表2人が運営するブログです。エアゼは、アプリ・Web・IoT・インタラクティブコンテンツのデザイン・開発を手がけています。

エアゼ ホームページ