SVG

画像SVG

SVGとは?

 状態:確認中  閲覧数:2,547  投稿日:2015-02-20  更新日:2015-03-17
XMLを記述したテキストファイル
・HTMLと同様にJavaScript(DOM API)による制御も可能

特徴
・XMLでベクトルグラフィックスを記述
・PNGなどの一般的な画像形式と異なり、ベクトルデータとして画像を表現

HTML
・タグによって文書の構造を記述

SVG
・タグで図形を記述

表示される図形
・svgタグの子(孫)要素として記述


SVG 1.1 仕様 (第2版) 日本語訳


HTML5でsvgタグを使用する際、xmlns属性は不要

 閲覧数:564 投稿日:2015-02-22 更新日:2015-07-21

XMLネームスペースは必要なの?


<svg xmlns="http://www.w3.org/2000/svg"> V.S. <svg>
・ネームスペースは不要
・<svg>だけで良い

※但し、SVG単体で使用する場合は、xmlns属性が必要

SVGをHTML内で表示する4つの方法

 閲覧数:722 投稿日:2015-07-21 更新日:2015-07-21

方法


A.objectタグ
B.imgタグ
C.CSS
D.svgタグ


A.objectタグ


SVG画像を表示したい箇所にobjectタグを挿入
・type属性に「image/svg+xml」を、data属性に表示するSVGファイルのURLを指定
・最も互換性が高い
・SVGをサポートしたほぼすべてのWebブラウザで動作
・JavaScriptによるSVGドキュメントへのアクセスも可能
<object type="image/svg+xml" data="★★.svg">


B.imgタグ


SVG画像を表示したい箇所にimgタグを挿入
・JavaScriptによる制御不可
<img src="★★.svg">


C.CSS


.クラス名 {background: url(★★.svg);}
<style>
 .svgbg {
   background: url(★★.svg);
   width:430px; height:330px;
 }
</style>
<div class="svgbg"></div>



D.svgタグ


インラインSVG
   <svg xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink">
     <circle cx="" cy="" r="" fill="" />
     <rect x="" y="" width="" height="" fill="" />
   </svg>
<!DOCTYPE html>
<html>
 <body>
   <svg xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink">
     <circle cx="100" cy="100" r="100" fill="red" />
     <rect x="130" y="130" width="300" height="200" fill="blue" />
   </svg>
 </body>
</html>




tutorial.jp/graph/svg/svgman.pdf


今年こそついにSVG元年?まだ間に合う!SVGの学習に役立つサイト紹介
Advent Calendar 3日目:SVG画像を1キロバイトでも削るダイエット術!
Advent Calendar 3日目:SVG画像を1バイトでも削るためのコードゴルフ


SVG表示サイズ

SVGアニメーション



類似度ページランキング
順位 ページタイトル抜粋
1 SVG 100
2 SVGハマった点 55
3 SVG表示サイズ 55
4 ZorroSVG 55
5 SVGイラスト素材 50
6 SVGアニメーション 46
7 RGB ⇔ HSV 43
8 SVGアイコンを探す旅 43
9 PNG 33
10 RGB → HSL 33
11 RGB 33
12 HSV / HSB 33
13 HSL → RGB 33
14 HSLとHSVの違い 31
15 HSV → RGB 計算方式の違い 30
16 GIMP 29
17 RGB → HSL 目次 27
18 OOCSS 25
19 P2VJ 25
20 RGB → HSL / RGB → HSV 25
2025/4/24 16:05 更新
週間人気ページランキング / 4-17 → 4-23
順位 ページタイトル抜粋 アクセス数
1 鉄道会社毎のカラーコード | カラーコード(色) 18
2 Inkscape | ソフトウェア 16
3 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 9
4 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 7
5 「東京都」のカラーコード取得は難しい | カラーコード(色) 6
6 RGB ⇔ Lab | 色変換(色) 5
6 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 5
6 効果を打ち消すスタイルシート | CSS 5
7 「Create Link」代替拡張機能を探した結果は、「CopyTabTitleUrl」でした。 | CopyTabTitleUrl(Chrome 拡張機能) 4
7 「ログイン情報を保持」の名称 4
8 「レイアウト崩れ」がどうしても解決しない → Chrome「デベロッパーツール」で怪しいと思った要素を、正常表示されるまで削除し続けていく | CSSトラブル対応(CSS) 2
8 フォーム(CSS) カテゴリー 2
8 色モデルイメージ図 | 色変換(色) 2
8 font-familyには游ゴシックを指定しない | フォント 2
8 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 2
8 数値データ型(CSS) カテゴリー 2
8 Design 0 2
9 G'MIC | GIMP 系(ソフトウェア) 1
9 カラーコード(色) カテゴリー 1
9 Fireworks カテゴリー 1
2025/4/24 1:01 更新