コードの最適化は常にプログラマーの永遠のニーズであり、SVG 画像を合理的に使用して PNG/JPG やその他の形式の一部の画像を置き換えることは、フロントエンドの最適化の重要な部分です。まず、最適化について見てみましょう。 SVG画像の利点は次のとおりです。
SVG は多くのツール (メモ帳など) で読み取りおよび変更できます。
SVG 画像の小さな例をいくつか示します。
3 番目の共有アイコンのコードを見てみましょう。
<svg xmlns=http://www.w3.org/2000/svg width=20 height=20 viewBox=0 0 20 20> <g ストローク=#AAB0BA fill=none fill-rule=evenodd> <path d=M10 .524 3.413v8.235 ストローク-ラインジョイン=ラウンド/> <パス d=M13.027 7.508c.813 0 1.678-.01 1.678-.01.449 0 .812.376.812.826l-.005 6.36a.819.819 0 0 1-.811.826H6.31a.822.822 0 0 1-.811-.826l.005-6.36c0-.456.36-.825.812-.825l1.689.006M8.373 5.111l2.143-2.09 2.143 2.07/> </g></svg>
SVG を理解していない生徒は、私が初めて会ったときと同じように、今も顔に疑問符が浮かんでいると思います。心配しないで、基本から始めましょう。
SVGとは何ですか?SVG は XML 構文に基づいた画像形式で、正式名は Scalable Vector Graphics です。他の画像形式はピクセル処理をベースにしており、SVGは画像の形状を記述したものなので、本質的にはサイズが小さく、何度拡大しても崩れないテキストファイルです。また、SVG は World Wide Web Consortium の標準であり、DOM や XSL などの W3C 標準と統合されています。
使い方は？HTML5 では、上の小さな赤いハートのような SVG 要素を HTML ページに直接埋め込むことができます。
<body> <svg xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink width=20 height=20 viewBox=0 0 20 20> <defs> <rect id=ay=54 width=60 height=25 rx=1/> <mask id=bx=0 y=0 width=60 height=25 fill=#fff> <use xlink:href=#a/> </mask> </defs> <g translate=translate(-9 -56) fill=none fill-rule=evenodd> <use ストローク= #EDEEEF マスク=url(#b) ストローク幅=2 xlink:href=#a/> <パス d=M19.05 62.797c-.208-.268-1.776-2.188-3.629-1.725-.662.165-1.439.44-2.009 1.463-2.18 3.913 4.965 8.983 5.615 9.433V72l.023-.016.023.016v-.032c.65-.45 7.795-5.52 5.615-9.433-.57-1.023-1.347-1.298-2.009-1.463-1.853-.463-3.42 1.457-3.629 1.725z fill=red/> </g> </svg></body>
SVG コードは、 .svg で終わるファイルに記述し、 <img> 、 <object> 、 <embed> 、 <iframe>などのタグを使用して Web ページに挿入することもできます。
<img src=search.svg><object id=object data=search.svg type=image/svg+xml></object><embed id=embed src=search.svg type=image/svg+xml><iframe id=iframe src=search.svg></iframe>
CSSはsvgも使える
.logo {背景: url(logo.svg);}SVG ファイルを BASE64 エンコードに変換して、データ URI として Web ページに書き込むこともできます。
<img src=data:image/svg+xml;base64,[データ]>SVG 構文
1. <svg>タグ
SVG コードは、最上位タグ<svg>に配置されます。以下に例を示します。
<svg width=100% height=100%> <circle id=mycircle cx=50 cy=50 r=50 /></svg>
<svg>の width 属性と height 属性は、HTML 要素内の SVG 画像の幅と高さを指定します。相対単位に加えて、絶対単位（単位：ピクセル）も使用できます。これら 2 つの属性が指定されていない場合、SVG 画像のデフォルトのサイズは 300 ピクセル (幅) x 150 ピクセル (高さ) です。
SVG 画像の一部のみを表示したい場合は、viewBox 属性を指定します。
<svg width=100 height=100 viewBox=50 50 50 50> <circle id=mycircle cx=50 cy=50 r=50 /></svg>
<viewBox>属性の値には、左上隅の横座標と縦座標、ビューポートの幅と高さの 4 つの数値があります。上記のコードでは、SVG 画像は幅 100 ピクセル x 高さ 100 ピクセルで、viewBox 属性はビューポートが点 (50, 50) から開始することを指定します。実際に表示されるのは、右下隅の 4 分の 1 の円です。
ビューポートは、そのスペースに収まる必要があることに注意してください。上記のコードでは、ビューポートのサイズは 50 x 50 です。SVG 画像のサイズは 100 x 100 であるため、ビューポートは SVG 画像のサイズに合わせて拡大されます。つまり、4 倍に拡大されます。 。
width 属性と height 属性を指定せず、viewBox 属性のみを指定した場合は、SVG 画像のアスペクト比のみを指定することと同じになります。この場合、SVG 画像のデフォルトのサイズは、SVG 画像に含まれる HTML 要素のサイズと等しくなります。
2. <circle>タグ
<circle>タグは円を表します。
<svg width=300 height=180> <circle cx=30 cy=50 r=25 /> <circle cx=90 cy=50 r=25 class=red /> <circle cx=150 cy=50 r=25 クラス=ファンシー /></svg>
上記のコードは 3 つの円を定義しています。 <circle>タグの cx、cy、r 属性はそれぞれ横座標、縦座標、半径であり、単位はピクセルです。座標は、 <svg>キャンバスの左上隅の原点を基準としています。
class 属性は、対応する CSS クラスを指定するために使用されます。
.red { 塗りつぶし: 赤;}.fancy { 塗りつぶし: なし; ストローク: 黒; }SVG の CSS プロパティは、Web 要素の CSS プロパティとは異なります。
塗りつぶし: 塗りつぶしの色
ストローク: ストロークの色
ストローク幅: 境界線の幅
3. <line>タグ
<line>タグは直線を描画するために使用されます。
<svg width=300 height=180> <line x1=0 y1=0 x2=200 y2=0 style=ストローク:rgb(0,0,0);ストローク幅:5 /></svg>
上記のコードでは、<line> タグの x1 属性と y1 属性は線分の始点の横座標と縦座標を表し、x2 属性と y2 属性は線分の終点の横座標と縦座標を表します。線分; style 属性は線分のスタイルを表します。
4. <polyline>タグ
<polyline>タグは、ポリラインを描画するために使用されます。
<svg width=300 height=180> <polyline Points=3,3 30,28 3,53 fill=none ストローク=black /></svg>
<polyline>の Points 属性は、各端点の座標を指定します。横軸と縦軸はカンマで区切られ、点はスペースで区切られます。
5. <rect>タグ
<rect>タグは四角形を描画するために使用されます。
<svg width=300 height=180> <rect x=0 y=0 height=100 width=200 style=ストローク: #70d5dd fill: #dd524b /></svg>
<rect>の x 属性と y 属性は、長方形の左上隅の端点の横座標と縦座標を指定します。幅と高さの属性は、長方形の幅と高さ (単位ピクセル) を指定します。
6. <ellipse>タグ
<ellipse>タグは、楕円を描画するために使用されます。
<svg width=300 height=180> <ellipse cx=60 cy=60 ry=40 rx=20 ストローク=黒 ストローク幅=5 塗りつぶし=シルバー/></svg>
<ellipse>の cx 属性と cy 属性は、楕円の中心の横座標と縦座標 (単位ピクセル) を指定し、rx 属性と ry 属性は楕円の横軸と縦軸の半径 (単位ピクセル) を指定します。
7. <polygon>タグ
<polygon>タグは、多角形を描画するために使用されます。
<svg width=300 height=180> <polygon fill=green ストローク=オレンジ ストローク幅=1 ポイント=0,0 100,0 100,100 0,100 0,0/></svg>
<polygon>の Points 属性は、各端点の座標を指定します。横軸と縦軸はカンマで区切られ、点はスペースで区切られます。
8. <path>タグ
<path>タグはパスを指定するために使用されます。
<svg width=300 height=180><path d= M 18,3 L 46,3 L 46,40 L 61,40 L 32,68 L 3,40 L 18,40 Z></path></svg >
<path>の d 属性は、描画順序を表し、各文字は描画アクションを表し、その後に座標が続きます。
M: に移動 (移動)
L: 直線を引く(lineto)
Z: 閉じたパス
9. <text>タグ
<text>タグはテキストを描画するために使用されます。
<svg width=300 height=180> <text x=50 y=25>四客足球</text></svg>
<text>の x 属性と y 属性は、テキスト ブロックのベースラインの開始点の横座標と縦座標を表します。テキストのスタイルは、class 属性または style 属性を使用して指定できます。
10. <use>タグ
<use>タグは、形状をコピーするために使用されます。
<svg viewBox=0 0 30 10 xmlns=http://www.w3.org/2000/svg> <circle id=myCircle cx=5 cy=5 r=4/> <use href=#myCircle x=10 y =0 fill=blue /> <use href=#myCircle x=20 y=0 fill=white ストローク=ブルー /></svg>
<use>の href 属性はコピーするノードを指定し、 x 属性と y 属性は<use>の左上隅の座標です。さらに、幅と高さの座標を指定することもできます。
11. <g>タグ
<g>タグは、再利用しやすいように複数の図形を 1 つのグループにグループ化するために使用されます。
<svg width=300 height=100> <g id=myCircle> <text x=25 y=20>circle</text> <circle cx=50 cy=50 r=20/> </g> <use href = #myCircle x=100 y=0 fill=blue /> <use href=#myCircle x=200 y=0 fill=white ストローク=ブルー/></svg>
12. <defs>タグ
<defs>タグはカスタム シェイプに使用され、その内部のコードは表示されず、参照のみを目的としています。
<svg width=300 height=100> <defs> <g id=myCircle> <text x=25 y=20>circle</text> <circle cx=50 cy=50 r=20/> </g> < /defs> <use href=#myCircle x=0 y=0 /> <use href=#myCircle x=100 y=0 fill=blue /> <use href=#myCircle x=200 y=0 fill=white ストローク=ブルー /></svg>
13. <pattern>タグ
<pattern>タグは、領域をタイル化するために参照できる形状をカスタマイズするために使用されます。
<svg width=500 height=500> <defs> <pattern id=dots x=0 y=0 width=100 height=100 patternUnits=userSpaceOnUse> <circle fill=#bee9e8 cx=50 cy=50 r=35 /> </pattern> </defs> <rect x=0 y=0 width=100% height=100% fill=url(#dots) /></svg>
上記のコードでは、 <pattern>タグで円をドット パターンとして定義しています。 patternUnits=userSpaceOnUse <pattern>の幅と長さが実際のピクセル値であることを意味します。次に、このモードを下の四角形を塗りつぶすように割り当てます。
14. <image>タグ
<image>タグは、画像ファイルを挿入するために使用されます。
<svg viewBox=0 0 100 100 width=100 height=100> <image xlink:href=path/to/image.jpg width=50% height=50%/></svg>
上記のコードでは、 <image>のxlink:href属性は画像のソースを示しています。
15. <animate>タグ
<animate>タグは、アニメーション効果を生成するために使用されます。
<svg width=500px height=500px> <rect x=0 y=0 width=100 height=100 fill=#feac5e> <animateattributeName=x from=0 to=500 dur=2srepeatCount=infinite /> </rect ></svg>
上記のコードでは、四角形は動き続け、アニメーション効果を生成します。
<animate>の属性は以下の意味を持ちます。
attributeName: アニメーション効果が発生する属性の名前。
from: 単一アニメーションの初期値。
to: 単一アニメーションの終了値。
dur: 1 つのアニメーションの長さ。
repeatCount:アニメーションループモード。
アニメーションは複数のプロパティで定義できます。
<animateattributeName=x from=0 to=500 dur=2srepeatCount=infinite /><animateattributeName=width to=500 dur=2srepeatCount=infinite />
16. <animateTransform>タグ
<animate>タグは CSS 変換属性には影響しません。変換が必要な場合は、<animateTransform> タグを使用する必要があります。
<svg width=500px height=500px> <rect x=250 y=250 width=50 height=50 fill=#4bc0c8> <animateTransform 属性名=transform type=rotate begin=0s dur=10s from=0 200 200 to=360 400 400repeatCount=infinity /> </rect></svg>
上記のコードでは、 <animateTransform>の効果は回転です。このとき、from と to の属性値には 3 つの数値があり、最初の数値は角度の値、2 番目と 3 番目の値は座標です。回転中心。 from=0 200 200 は、開始時の角度が 0 で、回転が (200, 200) 付近で開始されることを意味します。 to=360 400 400 は、終了時の角度が 360 で、回転が (400) 付近で開始されることを意味します。 、400）。
1.DOM操作
SVG コードが HTML Web ページに直接記述されている場合、SVG コードは Web ページの DOM の一部となり、DOM を使用して直接操作できます。
<svg id=mysvg xmlns=http://www.w3.org/2000/svg viewBox=0 0 800 600preserveAspectRatio=xMidYMid meets> <circle id=mycircle cx=400 cy=300 r=50 /><svg>
上記のコードを Web ページに挿入した後、CSS を使用してスタイルをカスタマイズできます。
サークル { ストローク幅: 5; ストローク: #f00; } サークル: ホバー { ストローク: #f8f8f8;}SVG は JavaScript コードで操作できます。
var mycircle = document.getElementById('mycircle');mycircle.addEventListener('click', function(e) { console.log('circle clicked - enlarging'); mycircle.setAttribute('r', 60);},間違い）;上記のコードは、グラフィックをクリックすると、circle 要素の r 属性が書き換えられることを指定しています。
2. SVG DOM を取得する
<object> 、 <iframe> 、 <embed>タグを使用して SVG ファイルを挿入し、SVG DOM を取得します。
var svgObject = document.getElementById('object').contentDocument; var svgIframe = document.getElementById('iframe').contentDocument; var svgEmbed = document.getElementById('embed').getSVGDocument();<img> タグを使用して SVG ファイルを挿入した場合、SVG DOM を取得できないことに注意してください。
3. SVGソースコードを読む
SVGファイルはXMLテキストであるため、XMLコードを読み込むことでSVGのソースコードを読み取ることができます。
<div id=svg-container> <svg xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink xml:space=preserve width=500 height=440 > <!-- svg コード --> </svg></div>
XMLSerializer インスタンスの SerializeToString() メソッドを使用して、SVG 要素のコードを取得します。
var svgString = 新しい XMLSerializer() .serializeToString(document.querySelector('svg'));4. SVG画像をCanvas画像に変換する
まず、新しい Image オブジェクトを作成し、SVG 画像を Image オブジェクトの src 属性に割り当てる必要があります。
var img = new Image();var svg = new Blob([svgString], {type: image/svg+xml;charset=utf-8});var DOMURL = self.URL || self.webkitURL || var url = DOMURL.createObjectURL(svg);img.src = url;次に、画像が読み込まれたら、それを<canvas>要素に描画します。
img.onload = function () { var Canvas = document.getElementById('canvas'); var ctx = Canvas.getContext('2d');};まとめSVG ではそれ以外にもさまざまなことができます。SVG を使用して作成されるアニメーション効果とテキスト効果については後ほど詳しく説明しますが、今日はここまでにしましょう。
console.log('右下角点好看呦')以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、皆様も Script Home をサポートしていただければ幸いです。