SVG

画像SVG

SVGとは?

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

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

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

SVG
・タグで図形を記述

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


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


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

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

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


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

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

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

 閲覧数:567 投稿日: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バイトでも削るためのコードゴルフ

Twitter検索結果。「SVG」に関する最新ツイート

せんとん(戦豚)@次回主催貸切2/12エアコキ大戦✨次回出撃予定→2/5ガルボイサバ @senton2013
おゆまる @oyumaru_svg
マークンMKN @kakutousidoukan
すめらぎ - Sumeragi : 2/5 #B12Hr @0mrg
ヒロ@ @hiro_svg_cos
うみの@コスプレ垢 @Umino_cos7
ヒロ@ @hiro_svg_cos
うみの@コスプレ垢 @Umino_cos7
すめらぎ - Sumeragi : 2/5 #B12Hr @0mrg
ヒロ@ @hiro_svg_cos
うみの@コスプレ垢 @Umino_cos7
SHICA mili@2/18 初参加者を連れてOPSさん @SHICA_SVG
ヒロ@ @hiro_svg_cos
うみの@コスプレ垢 @Umino_cos7
ヒロ@ @hiro_svg_cos
うみの@コスプレ垢 @Umino_cos7
ヒロ@ @hiro_svg_cos
@Umino_cos7 ダメなの? 2023/02/05 06:18
うみの@コスプレ垢 @Umino_cos7
@hiro_svg_cos ん? 2023/02/05 06:17

SVG表示サイズ

SVGアニメーション



類似度ページランキング
順位 ページタイトル抜粋
1 SVGハマった点 55
2 SVG表示サイズ 55
3 ZorroSVG 55
4 SVGイラスト素材 50
5 SVGアニメーション 46
6 SVGアイコンを探す旅 43
7 RGB ⇔ HSV 43
8 RGB 33
9 RGB → HSL 33
10 HSL → RGB 33
11 HSV / HSB 33
12 PNG 33
13 HSLとHSVの違い 31
14 HSV → RGB 計算方式の違い 30
15 GIMP 29
16 RGB → HSL 目次 27
17 G'MIC 25
18 RGB → HSL / RGB → HSV 25
19 P2VJ 25
20 OOCSS 25
2023/2/05 7:11 更新
週間人気ページランキング / 1-29 → 2-4
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 49
2 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 38
3 「bgcolor」「background-color」「background」の違い | CSS 34
4 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 25
5 RGBの種類 / ビットカラー | RGB(色) 20
6 「属性」「プロパティ」「アトリビュート」の違い | CSS 18
6 Design 0 18
7 「東京都」のカラーコード取得は難しい | カラーコード(色) 17
8 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 16
9 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 15
9 Chrome でキャッシュを効かさない | Google Chrome(ブラウザ) 15
10 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 14
11 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 13
11 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 13
11 「:after擬似要素」は、Chromeの「要素を検証」で確認できない | 擬似(CSS) 13
11 ICCプロファイル | カラーマネージメント(色) 13
11 HSLとHSVの違い | 色変換(色) 13
11 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 13
12 max-width: 100%の効果を打ち消すには、max-width: none; | CSS 12
13 GIMPで「レイヤーとして開く」を選択した画像、の位置情報(x,y)を表示させる方法が分からない | GIMP 系(ソフトウェア) 11
2023/2/5 1:01 更新