Files

T

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

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>

2026-06-23 19:21:18 +09:00

7.1 KiB

Raw Blame History

id, title, category, status, verification_status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, created_at, updated_at, review_reason, merge_history, tags, raw_sources, applied_in, github_commit

title

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]

<!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]

<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]

<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]

<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]

<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):

<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):

<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).

7.1 KiB Raw Blame History