SVG는 Scalable Vector Graphics의 약자이며 XML로 2D 그래픽 및 그래픽 응용 프로그램을 설명하는 언어이며 XML은 SVG 뷰어에 의해 렌더링됩니다. 대부분의 웹 브라우저는 PNG, GIF 및 JPG를 표시할 수 있는 것처럼 SVG를 표시할 수 있습니다.
HTML SVG에서 타원을 그리려면 SVG
예시
다음 코드를 실행하여 HTML5 SVG에서 서로 위에 두 개의 타원을 그리는 방법을 배울 수 있습니다.
<!DOCTYPE html> <html> <head> <style> #svgelem { position: relative; left: 20%; -webkit-transform: translateX(-20%); -ms-transform: translateX(-20%); transform: translateX(-20%); } </style> <title>HTML5 SVG Ellipse</title> </head> <body> <h2>HTML5 SVG Ellipse</h2> <svg id="svgelem" width="500" height="200" xmlns="https://www.w3.org/2000/svg"> <ellipse cx="240" cy="100" rx="220" ry="30" style="fill:green" /> <ellipse cx="220" cy="70" rx="190" ry="20" style="fill:yellow" /> </svg> </body> </html>
출력