SVG

画像SVG

SVGとは?

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

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

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

SVG
・タグで図形を記述

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


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


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

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

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


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

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

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

 閲覧数:751 投稿日: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/24 18:14 更新
週間人気ページランキング / 8-17 → 8-23
順位 ページタイトル抜粋 アクセス数
1 「Google Chrome」の文字が突然ギザギザで表示されるようになったら、「chrome://flags/#top-chrome-md」へアクセス後、右上の「Reset all」ボタンをクリックします。 | Google Chrome(ブラウザ) 15
1 「東京都」のカラーコード取得は難しい | カラーコード(色) 15
2 RGB ⇔ Lab | 色変換(色) 12
3 Design 0 11
4 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 9
4 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 9
5 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 8
6 「bgcolor」「background-color」「background」の違い | CSS 6
6 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 6
7 色モデルイメージ図 | 色変換(色) 5
7 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 5
7 鉄道会社毎のカラーコード | カラーコード(色) 5
7 似顔絵ジェネレーター : 似顔絵メーカー / NIGAOE MAKER 5
8 「display:flex;」を設定している「
  • タグ」内の「タグ」クリック範囲を拡大する | Flexible Box Layout Module(CSS)
  • 4
    8 Click&Clean | Chrome 拡張機能 4
    9 HSLとHSVの違い | 色変換(色) 3
    9 16進数カラーコード / 2進数 3
    9 「z-index」効果を打ち消すスタイルシートは、「z-index:auto;」 3
    9 GIMPで「レイヤーとして開く」を選択した画像、の位置情報(x,y)を表示させる方法が分からない | GIMP 系(ソフトウェア) 3
    9 「:after擬似要素」は、Chromeの「要素を検証」で確認できない | 擬似(CSS) 3
    2025/8/24 1:01 更新