SVG: ano ito, mga pangunahing konsepto at paggamit sa web development

Ano ang SVG?

SVG — isang vector graphics format na batay sa XML, na lumitaw noong 2001 bilang rekomendasyon ng W3C. Hindi tulad ng mga raster format, ang SVG ay naglalarawan ng imahe sa pamamagitan ng geometric primitives: mga punto, linya, kurba at polygon. Ang SVG file ay isang ordinaryong text XML document na maaaring basahin, i-edit at i-compress gamit ang mga standard na tool.

Ang arkitektura ng SVG ay sumasaklaw ng ilang pangunahing konsepto. viewBox ay nagtatakda ng virtual coordinate system, independyente sa aktwal na laki ng elemento. Halimbawa, ang viewBox="0 0 100 100" ay lumilikha ng square grid na 100×100, kung saan ang lahat ng coordinate ay nakapirmi. Kapag nagbago ang lapad o taas ng container, ang nilalaman ay nag-scale nang proporsyonal.

Ayon sa W3C SVG 2 Specification, ang modernong bersyon ng SVG ay sumusuporta sa gradients, mask, filter, text na may arbitrary positioning, interactivity sa pamamagitan ng JavaScript at animation sa pamamagitan ng CSS at SMIL. Ang SVG ay isinama sa DOM bilang isang ganap na HTML elemento, na nagpapahintulot sa programmatic na pamamahala ng bawat graphic primitive.

Sa mobile development, ang SVG ay ginagamit din sa iOS sa pamamagitan ng UIGraphicsImageRenderer at sa Android sa pamamagitan ng VectorDrawable — parehong format ay nagko-convert ng mga paglalarawang katulad ng SVG sa hardware-accelerated rasters sa GPU.

Kasaysayan at pag-unlad ng SVG format

Ang SVG 1.0 ay naging rekomendasyon ng W3C noong 2001, SVG 1.1 noong 2003, SVG 2.0 ay nasa ilalim ng pag-unlad mula noong 2012. Ang pangunahing inobasyon ng SVG 2 ay mas malalim na integrasyon sa CSS, suporta para sa compositing at blending modes, at ang posibilidad ng paggamit ng SVG sa HTML nang walang namespace prefixes.

Kahit na ang SVG 2 ay hindi pa umabot sa status na Recommendation, sinusuportahan na ng modernong browser ang karamihan sa functionality nito. Ang Chrome, Safari, Firefox at Edge ay may halos kumpletong suporta para sa SVG 1.1 at malaking bahagi ng SVG 2.

Mga pangunahing elemento ng SVG

Ang SVG ay nagbibigay ng isang set ng mga elemento para sa paglalarawan ng dalawang-dimensional na graphics. Ang bawat elemento ay may mga attribute na tumutukoy sa posisyon, laki at visual na anyo nito. Ang mga attribute ay maaaring tukuyin bilang XML attributes o sa pamamagitan ng CSS properties.

• <rect> — parihaba na may mga attribute na x, y, width, height, rx, ry (pagbilog ng mga sulok).
• <circle> — bilog na may mga attribute na cx, cy (gitna) at r (radius).
• <ellipse> — ellipse na may mga attribute na cx, cy, rx, ry.
• <line> — segment ng linya na may mga attribute na x1, y1, x2, y2.
• <polyline> — putol na linya na may attribute na points (listahan ng mga coordinate).
• <polygon> — saradong polygon na may attribute na points.
• <path> — arbitraryong contour na may attribute na d (mga command: M, L, C, Q, A, Z).
• <text> — elementong teksto na may mga attribute na x, y, font-size, font-family.

Elementong path — ang pinakamakapangyarihan at nababaluktot na elemento ng SVG. Ang attribute na d ay naglalaman ng pagkakasunod-sunod ng mga command: M (moveTo), L (lineTo), C (cubic Bezier curve), Q (quadratic Bezier curve), A (arc), Z (close path). Bawat command ay may absolute o relative form (malaki o maliit na letra).

Sinusuportahan din ng SVG ang pag-grupo ng mga elemento sa pamamagitan ng <g>. Ang grupo ay nagmamana ng visual attributes (fill, stroke, transform) sa lahat ng child elements. Ito ay nagpapahintulot sa paglapat ng pare-parehong estilo sa buong set ng mga hugis at pamamahala ng kanilang posisyon sa pamamagitan ng isang transform.

SVG vs raster graphics: paghahambing ng mga format

Ang pangunahing pagkakaiba sa pagitan ng SVG at mga raster format (JPEG, PNG, WebP) — ang paraan ng pag-iimbak ng impormasyon. Ang raster ay nag-iimbak ng kulay ng bawat pixel sa isang grid na may nakapirming laki. Ang SVG ay nag-iimbak ng mathematical commands para sa pag-reproduce ng mga hugis. Ang pagkakaibang ito ay tumutukoy sa lahat ng mga bentahe at disadvantage ng mga format.

Ayon sa HTTP Archive, 2025, 68% ng mga website ay gumagamit ng SVG para sa mga icon, 34% para sa mga ilustrasyon at 22% para sa mga logo. Ang average na laki ng SVG icon ay 0.5–2 KB, samantalang ang raster icon na may katulad na kalidad ay 5–20 KB sa PNG format.

Para sa mga larawan at kumplikadong raster images, ang SVG ay hindi angkop — ang laki ng XML description ay lalampas sa laki ng katumbas na JPEG. Ang inirerekomendang lugar ng aplikasyon ng SVG: mga icon, logo, ilustrasyon, scheme, graph, mga elemento ng interface na may adaptive na disenyo.

Kailan pumili ng SVG at kailan ang raster format

SVG — pinakamainam na pagpipilian para sa mga elemento ng interface na dapat maging matalas sa Retina screen at sa anumang scale ng browser. Raster — para sa mga larawan, kumplikadong texture at mga imahe na may milyun-milyong kulay, kung saan ang vector description ay hindi makatuwirang kumplikado.

Hybrid na diskarte — kombinasyon ng SVG para sa mga elemento ng interface at WebP/AVIF para sa photo content — ay nagbibigay ng pinakamahusay na balanse sa pagitan ng kalidad at pagganap ng pag-load ng pahina.

Inline SVG at pag-style sa pamamagitan ng CSS

Inline SVG — ay ang pag-embed ng SVG markup nang direkta sa HTML document, hindi bilang isang hiwalay na file sa pamamagitan ng <img> o background-image. Ang bentahe ng inline SVG ay ang SVG elements ay nagiging bahagi ng DOM at maaaring i-style sa pamamagitan ng CSS, pamahalaan sa pamamagitan ng JavaScript at i-animate nang walang karagdagang mga request sa server.

Hindi tulad ng <img src="icon.svg"> kung saan ang SVG ay nakahiwalay sa shadow DOM, ang inline SVG ay nagmamana ng mga kulay at font ng parent document. Ito ay nagpapahintulot, halimbawa, na baguhin ang kulay ng icon kapag nag-hover sa pamamagitan ng CSS pseudo-class :hover nang hindi naglo-load ng hiwalay na file para sa bawat estado.

Ayon sa CSS-Tricks, ang inline SVG ay ang inirerekomendang paraan ng paggamit ng mga icon sa modernong web applications. Ang CSS properties na fill, stroke, stroke-width ay inilalapat nang direkta sa SVG elements. Para sa pag-customize sa pamamagitan ng CSS, mahalaga na sa orihinal na SVG, ang fill at stroke ay hindi nakatakda bilang inline attributes — kung hindi, hindi sila maaaring i-override ng CSS.

• Mga Bentahe: pag-style sa pamamagitan ng CSS, pamamahala sa pamamagitan ng JS, walang HTTP requests, adaptability ng viewBox.
• Mga Disadvantage: pagtaas ng laki ng HTML page, hindi posibilidad ng pag-cache nang hiwalay sa HTML.
• Alternatibo: SVG-sprites — pagsasama ng maraming SVG sa isang file at paggamit ng <use href="#id">.

SVG-sprites ay lumulutas ng problema sa pag-cache: lahat ng icon ay kinokolekta sa isang file, nilo-load ito ng browser nang isang beses, at ang mga indibidwal na icon ay ikinokonekta sa pamamagitan ng <use> na may pagbanggit ng id ng kinakailangang elemento sa loob ng sprite.

SVG animation: CSS at SMIL

CSS SVG animation — ang pinakakaraniwan at mahusay na paraan ng pag-animate ng vector graphics sa browser. Ang CSS properties tulad ng transform, opacity at fill ay inilalapat sa SVG elements tulad ng sa HTML elements. Para sa animation kasama ang isang arbitraryong path, ginagamit ang CSS property na offset-path.

SMIL (Synchronized Multimedia Integration Language) — isang built-in na mekanismo ng animation sa SVG, independyente sa CSS. Ang mga elementong <animate>, <animateTransform> at <animateMotion> ay nagpapahintulot sa pag-animate ng anumang SVG attribute nang walang JavaScript at CSS. Ang SMIL animation ay garantisadong naka-sync sa frame rate ng browser.

Ayon sa MDN Web Docs, ang SMIL ay sinusuportahan sa lahat ng modernong browser, ngunit ang CSS animation ay itinuturing na mas predictable at mahusay. Ang pangunahing senaryo para sa SMIL — animation ng mga attribute na hindi maa-access sa pamamagitan ng CSS, halimbawa d (path) ng elementong <path>.

JavaScript + requestAnimationFrame ay nagbibigay ng maximum na kontrol sa SVG animation. Ang mga web developer ay gumagamit ng mga library na GSAP at Anime.js para sa mga kumplikadong sequence ng animation na may mga timeline at easing functions na mahirap ipatupad sa pamamagitan ng purong CSS.

Mga halimbawa ng code: paggawa ng SVG graphics

Unang halimbawa — simpleng icon ng bahay gamit ang mga pangunahing SVG elements. Lahat ng hugis ay rect at polyline:

<!-- Inline SVG icon -->
<svg viewBox="0 0 100 100" width="48" height="48" xmlns="http://www.w3.org/2000/svg">
  <rect x="20" y="50" width="60" height="40" fill="#4A90D9" />
  <rect x="35" y="65" width="30" height="25" fill="#fff" />
  <polyline points="10,50 50,15 90,50" fill="none" stroke="#4A90D9" stroke-width="6" />
</svg>

Pangalawang halimbawa — rotation animation ng loader sa pamamagitan ng CSS. Gumagamit ng <circle> na may attribute na stroke-dasharray para gumawa ng putol-putol na contour:

<!-- CSS animated spinner -->
<svg class="spinner" viewBox="0 0 50 50" width="40" height="40">
  <circle cx="25" cy="25" r="20" fill="none"
    stroke="#4A90D9" stroke-width="4"
    stroke-dasharray="125.6 31.4" />
</svg>

<style>
  .spinner circle {
    animation: spin 1.5s linear infinite;
    transform-origin: center;
  }
  @keyframes spin {
    to { transform: rotate(360deg); }
  }
</style>

Pangatlong halimbawa — path animation sa pamamagitan ng library na GSAP para sa maayos na pag-drawing ng contour. Ang GSAP ay gumagana sa attribute na stroke-dashoffset, na lumilikha ng epekto ng paglitaw ng linya:

// Gumuhit ng path gamit ang GSAP
import gsap from "gsap";

const path = document.querySelector("#myPath");
const length = path.getTotalLength();

gsap.set(path, {
    strokeDasharray: length,
    strokeDashoffset: length
});

gsap.to(path, {
    strokeDashoffset: 0,
    duration: 2,
    ease: "power2.out"
});