bluemsi/2nd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs(10_Wiki): W3Schools 위키화 — HTML/CSS/JavaScript(core)

Browse Source 
W3Schools 튜토리얼을 P-Reinforce v3.1 포맷으로 위키화(영어 본문, 한/영 섹션 헤더).
- Topic_HTML: 59문서 (튜토리얼+예제, 레퍼런스/메타 제외)
- Topic_CSS: 190문서 (메인 + Advanced/Flexbox/Grid/RWD 전체)
- Topic_JavaScript: 120문서 (코어 언어; Temporal/DOM상세/BOM/WebAPI/AJAX/jQuery/Graphics 등은 후속)
각 폴더 00_INDEX.md(MOC) 포함. 코드 verbatim, 미확인분은 "Not found in source" 표기.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
g1nation
2026-06-23 19:21:18 +09:00
parent 8957890d13
commit 9609c04755
379 changed files with 54618 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
10_Wiki/Topic_HTML/HTML_SVG.md
+150
View File
@@ -0,0 +1,150 @@
---
id: html-svg
title: "HTML SVG"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["SVG", "Scalable Vector Graphics", "<svg>", "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 (`<circle>`, `<rect>`, `<polygon>`, `<ellipse>`, `<text>`, `<linearGradient>`). [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Inline SVG pattern** — an `<svg width height>` 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** — `<rect rx ry>` produces rounded corners. [S1]
- **Gradient pattern** — define `<linearGradient>` (with `<stop>` color stops) inside `<defs>`, then reference via `fill="url(#id)"`. [S1]
- **Fallback text pattern** — text inside `<svg>` ("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
<!DOCTYPE html>
<html>
<body>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>
```
**SVG rectangle** — [S1]
```html
<svg width="400" height="120">
<rect x="10" y="10" width="200" height="100" stroke="red" stroke-width="6" fill="blue" />
</svg>
```
**SVG rounded rectangle (with opacity)** — `rx`/`ry` round the corners; the `style` string sets fill, stroke, and opacity: [S1]
```html
<svg width="400" height="180">
<rect x="50" y="20" rx="20" ry="20" width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
```
**SVG star** — a polygon with a non-zero fill rule: [S1]
```html
<svg width="300" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
```
**SVG gradient ellipse with text** — a linear gradient defined in `<defs>` and applied to an ellipse, with overlaid text: [S1]
```html
<svg height="130" width="500">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
<text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
Sorry, your browser does not support inline SVG.
</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
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
```
Gradient via defs (HTML/SVG):
```html
<defs>
<linearGradient id="grad1">
<stop offset="0%" stop-color="yellow" />
<stop offset="100%" stop-color="red" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
```
## ⚖️ 비교 및 선택 기준 (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).