HTML / SVG үндэс

SVG үндэс

SVG (Scalable Vector Graphics) нь вектор зургийн XML-д суурилсан формат юм. Canvas-аас ялгаатай нь SVG нь пиксел биш математик тэгшитгэлд суурилдаг тул ямар ч хэмжээнд тодорхой харагддаг — гар утасны дэлгэцнээс том TV-ийн дэлгэц хүртэл.

Inline SVG

SVG-г HTML дотор шууд бичиж болно:

html
<!-- SVG нь HTML-д шууд орно -->
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- Энд SVG элементүүд байрлана -->
</svg>

xmlns attribute нь SVG namespace-г зааж байна — inline SVG-д заавал байх шаардлагагүй, гэхдээ .svg файлд байх ёстой.

Үндсэн дүрсүүд

Тэгш өнцөгт — <rect>

html
<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- rect: x, y, width, height -->
  <rect x="20" y="20" width="120" height="80" fill="#f87171" />

  <!-- rx, ry — булан дугуйлах -->
  <rect x="160" y="20" width="120" height="80"
        fill="#60a5fa" rx="12" ry="12" />

  <!-- Зөвхөн хүрээ -->
  <rect x="20" y="120" width="260" height="60"
        fill="none" stroke="#4ade80" stroke-width="3" />
</svg>

Тойрог ба зуурмаг — <circle>, <ellipse>

html
<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- circle: cx (төвийн x), cy (төвийн y), r (радиус) -->
  <circle cx="80" cy="100" r="60" fill="#fbbf24" />

  <!-- ellipse: cx, cy, rx (хэвтээ радиус), ry (босоо радиус) -->
  <ellipse cx="220" cy="100" rx="70" ry="40" fill="#a78bfa" />
</svg>

Шугам — <line>

html
<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
  <!-- line: x1,y1 эхлэл → x2,y2 төгсгөл -->
  <line x1="20" y1="75" x2="280" y2="75"
        stroke="#94a3b8" stroke-width="2" />

  <!-- Тасархай шугам -->
  <line x1="20" y1="120" x2="280" y2="120"
        stroke="#f87171" stroke-width="2"
        stroke-dasharray="8 4" />
</svg>

Олон өнцөгт — <polygon>, <polyline>

html
<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- polygon: цэгүүдийн жагсаалт, автоматаар хаагдана -->
  <polygon points="150,20 280,180 20,180"
           fill="#4ade80" stroke="#fff" stroke-width="2" />

  <!-- polyline: нээлттэй шугамын цуврал -->
  <polyline points="20,150 80,80 140,120 200,40 280,100"
            fill="none" stroke="#60a5fa" stroke-width="3" />
</svg>

Зам — <path>

<path> нь SVG-ийн хамгийн хүчирхэг элемент бөгөөд дурын хэлбэр зурах боломжтой:

html
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!--
    M = moveTo (үзэг өргөх)
    L = lineTo (шугам зурах)
    C = cubic bezier муруй
    Z = closePath (хаах)
  -->
  <path d="M 100 20 L 180 160 L 20 160 Z"
        fill="#f87171" stroke="#fff" stroke-width="2" />
</svg>

Практикт <path>-ийн d attribute-г гараар бичдэггүй — Figma, Illustrator зэрэг хэрэгслээс экспорт хийдэг.

Текст — <text>

html
<svg width="300" height="100" xmlns="http://www.w3.org/2000/svg">
  <!-- text: x, y нь текстийн суурийн цэг -->
  <text x="150" y="55"
        font-family="Arial" font-size="24"
        font-weight="bold" fill="#f1f5f9"
        text-anchor="middle">
    Ulaanbaatar.app
  </text>
</svg>

Inline SVG vs <img> tag

html
<!-- img tag-аар SVG оруулах — CSS-ээр өнгө өөрчилж болохгүй -->
<img src="icon.svg" alt="Нүүр дүрс" width="24" height="24" />

<!-- Inline SVG — CSS болон JavaScript-ээр бүрэн удирдах боломжтой -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
     xmlns="http://www.w3.org/2000/svg">
  <path d="M12 2L2 7l10 5 10-5-10-5z" fill="currentColor" />
</svg>

currentColor нь SVG-г оролцуулсан элементийн CSS color утгыг авдаг — энэ нь icon-г ямар ч өнгөтэй хэрэглэхэд маш хэрэгтэй.

Яагаад icon-д SVG ашигладаг вэ?

  • Ямар ч хэмжээнд тод — Retina дэлгэц, 4K monitor дээр blur болохгүй
  • CSS-ээр өнгө өөрчлөх — fill, stroke, color property-ээр шууд удирдана
  • Маш жижиг файл хэмжээ — PNG-тэй харьцуулахад хамаагүй бага
  • Хөдөлгөөнт болгох боломжтой — CSS animation, JavaScript-ээр
  • Accessibility — <title>, aria-label ашиглан тайлбарлаж болно
html
<!-- Accessibility-тэй icon жишээ -->
<svg width="24" height="24" viewBox="0 0 24 24"
     aria-label="Нүүр хуудас руу буцах"
     role="img"
     xmlns="http://www.w3.org/2000/svg">
  <title>Нүүр хуудас</title>
  <path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"
        stroke="currentColor" stroke-width="2"
        fill="none" stroke-linecap="round" />
</svg>

Дараагийн хичээлд:

Responsive HTML-г судлана — viewport meta tag, <picture> элемент, srcset болон sizes attribute ашиглан янз бүрийн дэлгэцэд тохирох зураг хэрхэн оруулах талаар үзнэ.

← Өмнөх хичээлCanvas үндэсДараах хичээл →Responsive HTML