SVG

画像SVG

SVGとは?

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

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

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

SVG
・タグで図形を記述

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


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


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

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

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


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

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

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

 閲覧数:695 投稿日: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/2/05 16:54 更新
週間人気ページランキング / 1-29 → 2-4
順位 ページタイトル抜粋 アクセス数
1 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 22
2 16進数カラーコード / 2進数 11
3 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 9
4 鉄道会社毎のカラーコード | カラーコード(色) 7
5 キャラクター無料着せ替えジェネレーター Dress up game / オンラインサービス | イラスト参考(デザイン) 6
6 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 5
7 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 4
7 似顔絵ジェネレーター : 似顔絵メーカー / NIGAOE MAKER 4
7 FontAwesomeでアイコンが□(四角)になって表示されない Forbidden  | Font Awesome(フォント) 4
8 「東京都」のカラーコード取得は難しい | カラーコード(色) 3
8 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 3
8 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 3
8 「Google Chrome」の文字が突然ギザギザで表示されるようになったら、「chrome://flags/#top-chrome-md」へアクセス後、右上の「Reset all」ボタンをクリックします。 | Google Chrome(ブラウザ) 3
8 拡張機能が Chrome によって無効にされました / この拡張機能は破損している可能性があります。 | Chrome 拡張機能 3
9 キャラクター無料着せ替えジェネレーター Rinmaru Games / オンラインサービス | イラスト素材(デザイン) 2
9 Design 0 2
9 RGBの種類 / ビットカラー | RGB(色) 2
9 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 2
9 色空間 / 表色系 / 顕色系 / 混色系 2
9 「Midjourney」を使用してみた感想。2022 年 8 月 2 時点では、画像生成能力自体は素晴らしいと思いますが、UIが致命的に分かりづらかったです。 | AI画像生成 2
2025/2/5 1:02 更新