SVG деген эмне? Вектордук формат боюнча колдонмо

SVG пикселдерден эмес, тартуу буйруктарынан турган сүрөт форматы. Логотип, сүрөтчө же диаграмма SVG катары сакталганда, файлда «бул чекиттен тигил чекитке ийри сызык тартып, аны ушул түс менен толтур» сыяктуу буйруктар болот. Ошондуктан SVG каалаган өлчөмдө даана бойдон калат, көбүнчө өтө кичинекей болот жана аны текст редакторунда ачып, түзөтсө болот. Бул макалада SVG'нин W3C стандарттарынын арасындагы орду, файлдын түзүлүшү, браузерлердин жана программалардын колдоосу, коопсуздук коркунучтары жана SVG менен PNG же JPG ортосунда кантип конвертациялоо керектиги каралат.

SVG деген эмне?

SVG (Scalable Vector Graphics) эки өлчөмдүү вектордук графиканы сүрөттөө үчүн XML негизиндеги W3C стандарты. Кеңейтүүсү .svg, MIME түрү image/svg+xml. gzip менен кысылган түрү .svgz кеңейтүүсүн колдонот.

Растрдык форматтар (JPG, PNG, WebP) сүрөттү пикселдердин бекитилген тору катары сактайт; аны чоңойтсоңуз, пикселдер көрүнүп калат. SVG фигураларды математикалык түрдө сүрөттөйт, жана браузер же программа аларды экрандын чечилишине жараша кайра тартат. MDN'дин сүрөт форматтары боюнча колдонмосу SVG'ни тартуу буйруктары менен берилсе боло турган сүрөттөр үчүн, айрыкча көрсөтүү өлчөмү белгисиз же өзгөрүп турганда идеалдуу тандоо деп атайт жана ал жалпысынан фотолор үчүн пайдалуу эмес экенин белгилейт.

Тарыхы: SVG 1.0, 1.1 жана SVG 2

• 2001-жылдын 4-сентябры: SVG 1.0 W3C Сунушу катары жарыяланган.
• 2003-жылдын 14-январы: SVG 1.1 Сунуш болгон. 1.1 тилди модулдарга бөлүп, мобилдик профилдер сыяктуу ички топтомдорду аныктоону жеңилдеткен.
• 2011-жылдын 16-августу: SVG 1.1 Second Edition жарыяланган. Бул бүгүн браузерлер таянган туруктуу версия.
• SVG 2: W3C'нин жарыялоо тарыхына ылайык, жумушчу долбоорлор 2012-жылдан бери чыгып келет жана биринчи Candidate Recommendation Snapshot 2016-жылдын 15-сентябрында жарыяланган. Эң акыркы snapshot 2026-жылдын 6-октябрына таандык; документ дагы эле Candidate Recommendation баскычында.

SVG 2 1.1 Second Edition'га негизделип, HTML жана CSS менен жакшыраак интеграцияны көздөйт. Чыпкалар, маскалоо жана шрифттер сыяктуу айрым темалар өзүнчө CSS жана FX модулдарына көчүрүлгөн. Практикада браузерлер SVG 2нин бөлүктөрүн ишке ашырат, ошондуктан ар бир мүмкүнчүлүк бардык жерде иштейт деп ойлобоңуз.

SVG файлынын түзүлүшү

Жөнөкөй SVG файлы мындай көрүнөт:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200">
  <circle cx="50" cy="50" r="40" fill="#0b6bcb"/>
  <path d="M30 50 L45 65 L72 36" stroke="#fff" stroke-width="8" fill="none"/>
</svg>

Координаттар системасы: viewBox, width жана height

viewBox сүрөттүн ички координаттар системасын аныктайт (бул жерде 0дөн 100гө чейин). width жана height сүрөт баракта канча орун ээлерин белгилейт. viewBox'у бар SVG CSS'те берилген каалаган өлчөмгө пропорционалдуу масштабдалат. viewBox'у жок файлдар өлчөмү өзгөртүлгөндө кесилип калышы мүмкүн, бул логотиптердеги эң көп кездешкен каталардын бири.

Негизги элементтер

• Фигуралар: rect, circle, ellipse, line, polyline, polygon жана каалаган нерсени тарта алган path.
• Текст: text жана tspan. Текст белгиленүүчү жана изделүүчү бойдон калат, бирок көрүү түзмөгүндө шрифт жок болсо, запастагы шрифт колдонулат.
• Топтоо жана кайра колдонуу: g, defs, symbol, use. Сүрөтчө топтомдору көбүнчө бир файлда symbol элементтери катары топтолот.
• Боёо: бир түстөр, сызыктуу жана радиалдык градиенттер, үлгүлөр, кесүү контурлары, маскалар жана чыпкалар (бүдөмүктөтүү, көлөкө).
• Стиль жана анимация: SVG'ни CSS менен стилдештирсе болот; CSS анимациялары жана SMIL анимация элементтери кыймыл кошот.
• Камтылган мазмун: растрдык сүрөттөр үчүн image, HTML үчүн foreignObject жана JavaScript үчүн script.

Түс, тунуктук, катмарлар жана барактар

Тунуктук SVG'де табигый: тартылбаган нерсенин баары бош, ал эми opacity жана fill-opacity жарым тунуктукту аныктайт. Катмарлар g топтору менен берилет; Inkscape жана Illustrator өз катмарларын ушундайча сактайт. Түстөр демейки боюнча sRGB, жана түстөр сан менен жазылгандыктан кадимки маанидеги бит тереңдиги чеги жок. SVG көп барактуу документ форматы эмес; көп барактуу чиймелер үчүн PDF ылайыктуураак.

Браузерлердеги, системалардагы жана программалардагы колдоо

MDN'дин маалыматы боюнча, Chrome, Edge, Firefox, Opera жана Safari баары SVG'ни колдойт. Аны <img> аркылуу, CSS background-image катары, HTML'дин ичинде түз же <object> жана <iframe> менен колдонсоңуз болот. Inkscape, Adobe Illustrator, Affinity Designer жана Figma сыяктуу вектордук куралдар SVG'ни окуп, жазат, ал эми Microsoft Office'тин учурдагы версиялары SVG графикасын кыстарууга мүмкүндүк берет.

Башка жерлерде колдоо алсыз: көптөгөн социалдык тармактар, e-mail кардарлары, мессенжерлер жана жүктөө формалары SVG'ни кабыл албайт же алдын ала көрүнүшүн көрсөтпөйт. Мунун бир себеби төмөндө сүрөттөлгөн коопсуздук коркунучу.

Коопсуздук: SVG'ге документке болгондой мамиле кылыңыз

SVG XML документи жана ал script элементин, окуя атрибуттарын (мисалы, onload) жана тышкы шилтемелерди камтый алат. MDN'дин «SVG as an image» барагында SVG <img> же CSS фону аркылуу колдонулганда браузерлер JavaScript'ти өчүрүп, сүрөттөр же стилдер таблицалары сыяктуу тышкы ресурстарды жүктөбөөрү түшүндүрүлөт. Файл түз ачылганда же <iframe>, <object> же <embed> менен камтылганда бул чектөөлөр колдонулбайт.

Практикалык натыйжасы: эгер сайт колдонуучуларга SVG файлдарын жүктөөгө уруксат берип, аларды өз доменинен түз берсе, файлга камтылган скрипт ошол сайттын контекстинде иштеп кетиши мүмкүн (сакталган XSS). Кадимки коргонуу чаралары:

• Жүктөлгөн SVG'ни script'ти, окуя атрибуттарын, foreignObject'ти жана тышкы шилтемелерди алып салган тазалагычтан өткөрүңүз.
• Колдонуучу файлдарын өзүнчө доменден, катаал Content-Security-Policy менен же жүктөп алуу катары (Content-Disposition: attachment) бериңиз.
• Вектор керек болбосо, жүктөлгөн SVG'ни серверде PNG'ге конвертациялап, растрдык нускасын гана жарыялаңыз.

Кадимки колдонулуштары

• Логотиптер жана бренд материалдары: бир эле файл визиткадан тартып жарнак тактасына чейин даана бойдон калат.
• Интерфейс сүрөтчөлөрү: CSS менен боёсо болот жана жогорку тыгыздыктагы экрандарда эч качан бүдөмүк болбойт.
• Диаграммалар, карталар жана схемалар: D3.js сыяктуу китепканалар маалыматтарды түз эле SVG элементтерине тартат.
• Фавикондор: учурдагы браузерлер SVG фавикондорун <link rel="icon" type="image/svg+xml"> аркылуу кабыл алат.
• Кесүү жана басып чыгаруу: лазердик кескичтер, винил кескичтер жана саймачы машиналар вектордук контурлар менен иштейт.

Күчтүү жана алсыз жактары

Көп кездешкен көйгөйлөр жана аларды чечүү

Сайт же тиркеме SVG'ни кабыл албайт

Эң оңой чечим PNG көчүрмөсү. Биздин SVG'ден PNG'ге конвертер чийме сиз тандаган пиксел туурасында браузериңизде тунук PNG'ге айландырат. Файлыңыз жүктөлбөйт жана түзмөгүңүздөн чыкпайт.

Текст башка шрифт менен көрүнөт

SVG демейки боюнча шрифттерди камтыбайт; көрүү системасында шрифт жок болсо, запастагысы колдонулат. Сүрөт контекстинде тышкы шрифттер да жүктөлбөйт. Дизайн куралыңызда текстти контурларга айлантыңыз же шрифтти камтыңыз.

SVG баракта туура эмес өлчөмдө же кесилген

viewBox жок болсо же width/height бекитилген болсо, масштабдоо күтүлгөндөй иштебейт. Тамыр svg элементине чиймени камтыган viewBox кошуп, өлчөмдү CSS'те белгилеңиз.

Файл күтүлгөндөн чоң

Дизайн куралдары SVG'ге редактордун метаберилиштерин, ашыкча ондук белгилерди жана жашыруун катмарларды жазат. SVGO сыяктуу оптималдаштыргыч аларды алып салат. Сервердеги Gzip же Brotli кысуу тексттик SVG'ни андан ары кичирейтет.

PNG логотибим SVG катары керек

Растрдык сүрөттү чындап векторго «конвертациялоо» мүмкүн эмес; куралдар жасаган нерсе трассировка: фигуралар аныкталып, контур катары кайра тартылат. Биздин PNG'ден SVG'ге жана JPG'ден SVG'ге куралдарыбыз 2ден 8ге чейинки түс менен трассировкалайт. Натыйжалар жөнөкөй логотиптер жана чиймелер үчүн жакшы, фотолор үчүн одоно. Бул куралдарда файл коопсуз байланыш аркылуу биздин серверлерге жүктөлүп, ошол жерде трассировкаланат жана эң кечинде 30 мүнөттүн ичинде өчүрүлөт.

Конвертациялоо боюнча кеңештер

• Максаттуу өлчөмдү билиңиз: SVG'ни PNG'ге айландырганда сүрөт көрсөтүлө турган эң чоң өлчөмдү тандап, жогорку тыгыздыктагы экрандар үчүн аны эки эсе көбөйтүңүз. Биздин куралда эң узун тарап 4096 пикселге чейин болушу мүмкүн; туурасын бош калтырсаңыз, кичинекей чиймелер эң узун тарабы 1024 пиксел болгудай масштабдалат.
• Фото мазмуну үчүн JPG: SVG фотону камтыса жана тунуктук керек болбосо, JPG же WebP PNG'ден кичине; PNG'ни кийин сүрөт конвертеринде конвертациялай аласыз.
• Фавикондор: Логотибиңиз SVG болсо, фавикон генератору аны кабыл алып, пакетке icon.svg кошот.
• Трассировка үчүн таза булак: PNG'ден SVG түзгөндө жогорку чечилиштеги, тегиз түстүү, ызы-чуусуз сүрөттөн баштаңыз.

Көп берилүүчү суроолор

SVG менен PNG'нин айырмасы эмнеде?

PNG пикселдердин белгилүү бир саны жана чоңойтулганда бүдөмүк болот. SVG фигураларды сүрөттөйт жана каалаган өлчөмдө даана кайра тартылат. SVG логотиптерге жана сүрөтчөлөргө, PNG же JPG фотолорго жана скриншотторго ылайыктуу.

SVG файлында вирус болушу мүмкүнбү?

SVG аткарылуучу программа эмес, бирок ал JavaScript камтый алат. SVG сүрөт катары (<img>) көрсөтүлгөндө скрипттер иштебейт, бирок файл браузерде түз ачылганда иштеши мүмкүн. Белгисиз булактан келген SVG'ни түз ачпай, көрүүчүдө карап чыгыңыз же PNG'ге конвертациялаңыз.

SVG'ни Word'го же PowerPoint'ке кыстарса болобу?

Microsoft Office'тин учурдагы версиялары SVG кыстарууну колдойт. Эски версиялар үчүн же файлды башка программалар менен бөлүшө турган болсоңуз, PNG көчүрмөсү ишенимдүүрөөк.

SVG'ни PNG'ге конвертациялаганда сапат жоголобу?

PNG жоготуусуз, бирок чийме белгилүү бир пиксел өлчөмүнө бекитилет. Жетиштүү чоң туурасын тандасаңыз, эч кандай жоготууну байкабайсыз; PNG'ни кийин чоңойтсоңуз, ал бүдөмүк болот.

SVG анимацияны колдойбу?

Ооба. Кыймыл CSS анимацияларынан, SMIL анимация элементтеринен жана JavaScript'тен келиши мүмкүн. PNG'ге конвертациялоо бир кадрды берет.

Булактар

• W3C: Scalable Vector Graphics (SVG) 1.1 (Second Edition)
• W3C: Scalable Vector Graphics (SVG) 1.0 Specification
• W3C: Scalable Vector Graphics (SVG) 2
• W3C: SVG 2 жарыялоо тарыхы
• MDN: SVG as an image
• MDN: Image file type and format guide