SVGについて – ドキュメント内にSVGを表示する
SVGについて、描画の方法を試してみます。
まず、HTML5ドキュメント内にSVGタグを直接記述する方法です。
rect(四角形)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>テストHTML</title> </head> <body> <svg width="150" height="100"> <rect x="0" y="0" width="80" height="40" stroke="#000000" stroke-width="1" fill="#cccccc" /> </svg> </body> </html>
circle(円)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>テストHTML</title> </head> <body> <svg width="150" height="100"> <circle cx="25" cy="25" r="20" stroke="#000000" stroke-width="1" fill="#cccccc" /> </svg> </body> </html>
ellipse(楕円)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>テストHTML</title> </head> <body> <svg width="300" height="250" viewBox="0 0 500 300"> <ellipse cx="90" cy="5" rx="80" ry="30" stroke="#000000" stroke-width="1" fill="#cccccc" /> </svg> </body> </html>
line(直線)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>テストHTML</title> </head> <body> <svg width="300" height="250" viewBox="0 0 500 300"> <line x="20" y1="5" x2="150" y2="180" stroke="#000000" stroke-width="1" fill="#cccccc" /> </svg> </body> </html>
path(折れ線)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>テストHTML</title> </head> <body> <svg width="300" height="250"> <path d="M 10,0 90,150 120,20 60,5" stroke="#999" stroke-width="1" fill="#cccccc" /> </svg> </body> </html>
path(曲線)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>テストHTML</title> </head> <body> <svg width="300" height="250"> <path d="M 10,0 90,150 120,20 60,5" stroke="#999" stroke-width="1" fill="#cccccc" /> </svg> </body> </html>
polyline(連続する線)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>テストHTML</title> </head> <body> <svg width="300" height="250"> <polyline points="10,15 25,120 50,180 75,95 98,250 105,140 130,175 135,210 150,165" stroke="#000000" stroke-width="1" fill="none" /> </svg> </body> </html>
polygon(多角形)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>テストHTML</title> </head> <body> <svg width="300" height="250"> <polygon points="10 15 25 120 50 180 75 95 98 250 105 140 130 175 135 210 150 135" stroke="#000000" stroke-width="1" fill="none" /> </svg> </body> </html>