SVG

画像SVG

SVGとは?

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

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

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

SVG
・タグで図形を記述

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


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


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

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

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


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

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

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

 閲覧数:746 投稿日: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/8/02 20:41 更新
週間人気ページランキング / 7-26 → 8-1
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 19
2 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 15
3 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 11
3 「東京都」のカラーコード取得は難しい | カラーコード(色) 11
4 色モデルイメージ図 | 色変換(色) 7
4 鉄道会社毎のカラーコード | カラーコード(色) 7
5 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 6
6 「bgcolor」「background-color」「background」の違い | CSS 5
6 「Google Chrome」ブックマークをフォルダー単位で、「ドメイン毎」「追加日昇降順」に並べ替える拡張機能「Sortmark」 | Chrome 拡張機能 5
7 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 4
7 カラーコード / 色コード | カラーコード(色) 4
7 効果を打ち消すスタイルシート | CSS 4
7 FontAwesomeでアイコンが□(四角)になって表示されない Forbidden  | Font Awesome(フォント) 4
7 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 4
7 「Google Chrome」の文字が突然ギザギザで表示されるようになったら、「chrome://flags/#top-chrome-md」へアクセス後、右上の「Reset all」ボタンをクリックします。 | Google Chrome(ブラウザ) 4
7 Design 0 4
8 HTML5でiframeスクロールバーを表示しない方法が不明 | HTML5(HTML) 3
8 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 3
8 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 3
8 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 3
2025/8/2 1:01 更新