SVG эмне?

SVG (Өлчөмү масштабталган вектордук графика) — XML негизделген вектордук графика форматы, эки өлчөмдүү график түзүү үчүн. Raster сүрөттөрдөн айырмаланып, SVG графиканы математикалык формулалар менен сүрөттөйт, бул сүрөттөрдү сапатын жоготпостон масштабтоого мүмкүндүк берет.

SVGнин негизги өзгөчөлүктөрү:

• Вектордук формат: Сүрөттөр геометриялык primitives (нүктөлөр, сызыктар, кыстар, формалар) аркылуу сүрөттөлөт, пикселдер аркылуу эмес.
• XML негизинде: SVG документинин түзүмү XML синтаксиси негизделген, аны оңой окуп жана түзөтүүгө болот.
• Масштабдоого мүмкүнчүлүк: Сүрөттөр чоңойтулуп же кичирейтилгенде сапаты жоготулбайт.
• Интерактивдүүлүк: SVG элементтери интерактивдүү болушу мүмкүн, JavaScript аркылуу окуяларга жооп бериши мүмкүн (басуу, өтүү жана башка).
• Стилдөө: SVG элементтеринин көрүнүшү CSS аркылуу түзүлүшү мүмкүн.
• Анимация: SVG элементтеринин анимациясы ички каражаттар же CSS/JavaScript аркылуу колдоого алынат.

SVG колдонуу артыкчылыктары:

• Идеалдуу сүрөтчөлөр жана логотиптер үчүн: Масштабдоого мүмкүнчүлүк экрандын бардык чечимдеринде так көрсөтүүнү камсыздайт.
• Файлдын кичирейиши: Көптөгөн графика түрлөрү үчүн SVG файлдары аналогдуу растр форматтарынан кичирек болушу мүмкүн.
• SEO-достук: SVG ичиндеги текст издөө системалары тарабынан индекстелет.
• Жолдоочулук: Тексттик табиатынын аркасында, SVG жардамчы технологиялар үчүн көбүрөөк жеткиликтүү.
• Жөнөкөй өзгөртүү: XML болгондуктан, мазмунду динамикалык өзгөртүүгө болот.

Жөнөкөй SVG сүрөтүнүн мисалы (айлан):

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>