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 екінші басылымы жарияланды. Бұл бүгінгі браузерлер сүйенетін тұрақты нұсқа.
• SVG 2: W3C жариялау тарихы бойынша жұмыс жобалары 2012 жылдан бастап шықты, ал алғашқы Candidate Recommendation Snapshot 2016 жылғы 15 қыркүйекте жарияланды. Соңғы снапшот 2026 жылғы 6 қазанмен белгіленген; құжат әлі Candidate Recommendation кезеңінде.

SVG 2 1.1 екінші басылымына негізделген және 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 графикасын кірістіруге мүмкіндік береді.

Басқа жерлерде қолдау әлсіз: көптеген әлеуметтік желілер, пошта клиенттері, мессенджерлер және жүктеу формалары SVG-ді қабылдамайды не алдын ала көрсетпейді. Мұның бір себебі төменде сипатталған қауіпсіздік қатері.

Қауіпсіздік: SVG-ге құжат сияқты қараңыз

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

Практикалық салдары: сайт пайдаланушыларға SVG файлдарын жүктеуге рұқсат беріп, оларды өз доменінен тікелей берсе, файлға ендірілген сценарий сол сайттың контекстінде орындалуы мүмкін (stored XSS). Әдеттегі қорғау шаралары:

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

Әдеттегі қолданылуы

• Логотиптер мен бренд материалдары: бір файл визиткадан билбордқа дейін анық қалады.
• Интерфейс белгішелері: CSS арқылы түсін өзгертуге болады және тығыздығы жоғары экрандарда ешқашан бұлыңғырланбайды.
• Диаграммалар, карталар және схемалар: D3.js сияқты кітапханалар деректерді тікелей SVG элементтеріне салады.
• Favicon: қазіргі браузерлер SVG favicon-дарды <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-ді кейін сурет түрлендіргішінде түрлендіре аласыз.
• Favicon: логотипіңіз SVG болса, favicon жасау құралы оны қабылдайды және бумаға 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