--- id: html-svg title: "HTML SVG" category: "Frontend" status: "draft" verification_status: "conceptual" canonical_id: "" aliases: ["SVG", "Scalable Vector Graphics", "", "vector graphics", "inline SVG"] duplicate_of: "" source_trust_level: "B" confidence_score: 0.90 created_at: 2026-06-23 updated_at: 2026-06-23 review_reason: "" merge_history: [] tags: ["html", "web", "frontend", "svg", "graphics", "html5", "w3schools"] raw_sources: ["https://www.w3schools.com/html/html5_svg.asp"] applied_in: [] github_commit: "" --- # [[HTML SVG]] ## 🎯 ν•œ 쀄 톡찰 (One-line insight) SVG (Scalable Vector Graphics) defines vector-based 2D graphics in XML markup that can be embedded directly in HTML, scaling to any size without quality loss and integrating with CSS, the DOM, and JavaScript. [S1] ## 🧠 핡심 κ°œλ… (Core concepts) - **SVG = Scalable Vector Graphics** β€” used to define vector-based graphics for the web, defined in XML format. [S1] - **Lossless scaling** β€” every element and attribute can be animated, and graphics do not lose quality when zoomed or resized. [S1] - **A W3C recommendation** that integrates with other standards such as CSS, DOM, XSL, and JavaScript. [S1] - **Retained-mode / object model** β€” each drawn shape is remembered as an object; changing an attribute triggers automatic re-rendering by the browser. [S1] - **Declarative shapes** β€” circles, rectangles, polygons, ellipses, text, and gradients are written as XML elements (``, ``, ``, ``, ``, ``). [S1] ## 🧩 μΆ”μΆœλœ νŒ¨ν„΄ (Extracted patterns) - **Inline SVG pattern** β€” an `` block with shape child elements drawn directly in the HTML body. [S1] - **Shape + style pattern** β€” shapes carry presentation attributes (`stroke`, `stroke-width`, `fill`) or a `style="..."` string. [S1] - **Rounded rect pattern** β€” `` produces rounded corners. [S1] - **Gradient pattern** β€” define `` (with `` color stops) inside ``, then reference via `fill="url(#id)"`. [S1] - **Fallback text pattern** β€” text inside `` ("Sorry, your browser does not support inline SVG.") serves as a fallback. [S1] ## πŸ“– μ„ΈλΆ€ λ‚΄μš© (Details) **What is SVG?** SVG stands for Scalable Vector Graphics and is used to define vector-based graphics for the web. Key points: SVG defines graphics in XML format; each element and attribute can be animated; SVG is a W3C recommendation; SVG integrates with other standards such as CSS, DOM, XSL, and JavaScript. SVG graphics are scalable and lose no quality when zoomed or resized. [S1] **SVG circle** β€” a complete document drawing a yellow circle with a green border: [S1] ```html ``` **SVG rectangle** β€” [S1] ```html ``` **SVG rounded rectangle (with opacity)** β€” `rx`/`ry` round the corners; the `style` string sets fill, stroke, and opacity: [S1] ```html ``` **SVG star** β€” a polygon with a non-zero fill rule: [S1] ```html ``` **SVG gradient ellipse with text** β€” a linear gradient defined in `` and applied to an ellipse, with overlaid text: [S1] ```html SVG Sorry, your browser does not support inline SVG. ``` ## πŸ› οΈ 적용 사둀 (Applied in summary) The examples above are the canonical applied uses: a bordered circle, a filled rectangle, a translucent rounded rectangle, a polygon star with an even-odd fill rule, and a gradient-filled ellipse with overlaid text. No external project/commit applications found in the source. ## πŸ’» μ½”λ“œ νŒ¨ν„΄ (Code patterns) Inline SVG circle (HTML/SVG): ```html ``` Gradient via defs (HTML/SVG): ```html ``` ## βš–οΈ 비ꡐ 및 선택 κΈ°μ€€ (Comparison & decision criteria) The source contrasts SVG and Canvas: "SVG is a language for describing 2D graphics in XML," while "Canvas draws 2D graphics, on the fly (with JavaScript)." In SVG, each drawn shape is remembered as an object, and if an attribute changes, the browser can automatically re-render; in Canvas, once a graphic is drawn it is forgotten by the browser. [S1] | | SVG | Canvas | |---|---|---| | Resolution | Resolution independent | Resolution dependent | | Event handlers | Supports event handlers | No support for event handlers | | Text rendering | Good text rendering | Poor text rendering | | Complex graphics | Slow rendering if complex | β€” | | Save as image | β€” | Can save result as .png or .jpg | | Games | Not suited for game applications | Well suited for graphic-intensive games | Choose SVG for resolution-independent, interactive, text-heavy, or animatable graphics; choose [[HTML Canvas]] for pixel-level, graphic-intensive rendering such as games. [S1] ## βš–οΈ λͺ¨μˆœ 및 μ—…λ°μ΄νŠΈ (Contradictions & updates) No contradictions found in the source. The core distinction is retained-mode (SVG, an object model the browser re-renders) versus immediate-mode (Canvas, draw-and-forget pixels). [S1] ## βœ… 검증 μƒνƒœ 및 신뒰도 - **μƒνƒœ:** draft - **검증 단계:** conceptual (μ‹€μ œ 적용 사둀 발견 μ‹œ applied/validated둜 승격 κ°€λŠ₯) - **좜처 신뒰도:** B (W3Schools β€” widely used educational reference, not a primary standards body) - **μ‹ λ’° 점수:** 0.90 - **쀑볡 검사 κ²°κ³Ό:** μ‹ κ·œ 생성 (New discovery) ## πŸ”— 지식 κ·Έλž˜ν”„ (Knowledge Graph) - **μƒμœ„/루트:** [[HTML Tutorial]] - **κ΄€λ ¨ κ°œλ…:** [[HTML Canvas]], [[HTML Graphics]], [[HTML Media]], [[HTML5]] - **μ°Έμ‘° λ§₯락:** Referenced when rendering scalable, declarative, interactive vector graphics such as icons, charts, and logos. ## πŸ“š 좜처 (Sources) - [S1] W3Schools β€” HTML SVG β€” https://www.w3schools.com/html/html5_svg.asp ## πŸ“ λ³€κ²½ 이λ ₯ (Change history) - 2026-06-23: Initial draft synthesized from the W3Schools "HTML SVG" page (Astra wiki-curation, P-Reinforce v3.1 format).