Кіріспе

Екі өлшемді векторлық графика үшін ашық стандарт. Wikipedia-да SVG суреттері туралы ақпарат.

Шкалалы векторлық графика (SVG) – екі өлшемді графиканы анықтау үшін XML негізіндегі векторлық кескін форматы, ол интерактивтілік пен анимацияны қолдайды. SVG спецификациясы 1999 жылдан бері World Wide Web консорциумымен әзірленген ашық стандарт болып табылады. SVG суреттері векторлық графика форматында анықталады және XML мәтіндік файлдарында сақталады. Осылайша, SVG кескіндерін сапасын жоғалтпай кез келген өлшемге дейін өзгертуге болады, ал SVG файлдарын іздеуге, индекстеуге, скрипттермен өңдеуге және сығуға болады. XML мәтіндік файлдарды мәтіндік редакторлармен немесе векторлық графикалық редакторлармен жасауға және өңдеуге болады, ал оларды көптеген веб-браузерлер көрсетеді. Алғашқы қабылдану Internet Explorer-дің ескі нұсқаларында қолдаудың болмауына байланысты шектеулі болды. Алайда, 2011 жылдан бастап барлық негізгі десктоп браузерлер SVG-ні қолдауды бастады. Браузердің жергілікті қолдауы плагиндерді қажет етпеу, SVG-ні басқа мазмұнмен біріктіруге мүмкіндік беру және рендеринг пен скрипттердің сенімділігін арттыру сияқты әртүрлі артықшылықтарды ұсынады. SVG-ні мобильдік құрылғыларда әртүрлі форматта қолдау бар, әртүрлі құрылғылар мен браузерлер SVG Tiny 1.1 немесе 1.2 нұсқаларын қолдайды. SVG векторлық графикалық редакторларды пайдаланып жасалып, растрлық форматқа түрлендірілуі мүмкін. Веб-қосымшаларда Inline SVG SVG мазмұнын HTML құжаттарының ішіне енгізуге мүмкіндік береді. SVG-нің көптеген пайдалы қасиеттеріне қарамастан, егер кескіндер үшін қолданылса, ол қауіпсіздік тәуекелдерін тудыруы мүмкін, себебі ол скрипттерді немесе CSS-ті қамтуы мүмкін, бұл сайттар аралық скрипттік шабуылдарға немесе басқа да осалдықтарға әкелуі мүмкін.

1.x нұсқасы

SVG 1.0 2001 жылдың 4 қыркүйегінде W3C ұсынысы болды. SVG 1.1 2003 жылдың 14 қаңтарында W3C ұсынысы болды. SVG 1.1 спецификациясы модулдік болып келеді, бұл профиль ретінде анықталатын кіші жиынтықтарды құруға мүмкіндік береді. Осыдан басқа, SVG 1.1 мен SVG 1.0 арасындағы айырмашылық өте аз. SVG Tiny және SVG Basic (Мобильді SVG профильдері) 2003 жылдың 14 қаңтарында W3C ұсыныстары болды. Олар SVG 1.1 профильдері ретінде сипатталған. SVG Tiny 1.2 2008 жылдың 22 желтоқсанында W3C ұсынысы болды. Ол бастапқыда жоспарланған SVG Full 1.2 профилі ретінде жасалған (кейін SVG 2 пайдасына тоқтатылды), бірақ кейін дербес спецификация ретінде қайта құрылды. Көбінесе қолдау нашар. SVG 1.1 екінші басылымы, барлық қателер мен түсіндірмелерді қамтиды, бірақ бастапқы SVG 1.1-ге жаңа мүмкіндіктер қосылмады, 2011 жылдың 16 тамызында жарияланды. SVG Tiny 1.2 Portable/Secure, 2020 жылдың 29 шілдесінде IETF стандартының жобасы ретінде ұсынылған SVG Tiny 1.2 профилінің қауіпсіз кіші жиынтығы. SVG Tiny P/S деп те аталады. SVG Tiny 1.2 Portable/Secure BIMI стандартының жобасы үшін қажетті талап болып табылады.

2-ші нұсқасы

SVG 2 SVG 1.1-дің кейбір мүмкіндіктерін жояды немесе қолданудан шығарады және HTML5 және Web Open Font Format-тың жаңа мүмкіндіктерін қосады: 1.2-нің тағы бірнеше мүмкіндіктері енгізілді, бірақ SVG 2 әдетте SVG 1.2 шағын нұсқасының толық жиынтығы емес. SVG 2 2016 жылғы 15 қыркүйекте кандидаттық ұсыныс деңгейіне жетті, ал түзетілген нұсқалары 2018 жылғы 7 тамызда және 2018 жылғы 4 қазанда жарияланды. Соңғы нұсқасы 2023 жылғы 8 наурызда шығарылды.

Ерекшеліктері

SVG интерактивтілік, анимация және толыққанды графикалық мүмкіндіктерді қолдайды, осы арқылы оны веб және полиграфиялық қолданбалар үшін де пайдалануға болады. SVG кескіндерін gzip алгоритмімен қысуға болады, нәтижесінде SVGZ файлдары түпнұсқадан әдетте 20-50% кішірек болады. SVG сонымен қатар метадеректерді де қолдайды, бұл SVG мазмұнын тиімдірек индекстеуге, іздеуге және алуға мүмкіндік береді. SVG үш түрлі графикалық нысанды қолдайды: векторлық графикалық пішіндер (түзу сызықтар мен қисықтардан тұратын жолдар сияқты), растрлік кескіндер және мәтін. Графикалық нысандарды топтастыруға, стильдеуге, түрлендіруге және бұрын салынған нысандармен біріктіруге болады. Мүмкіндіктер жиынтығына ішкі түрлендірулер, қиып алу жолдары, альфа маскалар, сүзгі эффектілері және үлгі нысандары кіреді. SVG суреттерін интерактивті етуге болады және олар анимацияны қамтуы мүмкін, ол SVG XML элементтерінде немесе SVG Document Object Model (DOM) арқылы қол жеткізілетін скрипттерде анықталады. SVG стильдеу үшін CSS, ал скрипттер үшін JavaScript қолданады. SVG DOM-да қарапайым мәтін түрінде кездесетін мәтін, соның ішінде халықараздандыру және жергіліктендіру, SVG графикасының қолжетімділігін арттырады.

Сценарийлер мен анимация

SVG суреттері динамикалық және интерактивті болуы мүмкін. Элементтерге уақытқа байланысты өзгерістер SMIL арқылы сипатталуы мүмкін, немесе скрипт тілінде (мысалы, JavaScript) бағдарламалауға болады. W3C SVG-дегі анимация стандарты ретінде SMIL-ді ерекше ұсынады. Кез келген SVG графикалық нысанына "onmouseover" және "onclick" сияқты іс-қимылдар мен оқиғаларды орындау үшін көптеген оқиға басқарушыларын тағайындауға болады.

Мобильді профильдер

Өнеркәсіптік сұранысқа байланысты SVG 1.1 стандартымен екі мобильдік профиль енгізілді: SVG Tiny (SVGT) және SVG Basic (SVGB). Бұл SVG стандартының толық жиынтығының ішкі жиынтықтары болып табылады, негізінен мүмкіндіктері шектеулі пайдаланушы агенттеріне арналған. Атап айтқанда, SVG Tiny ұялы телефондар сияқты мүмкіндіктері өте шектеулі мобильді құрылғылар үшін анықталды; ол стильдеуді немесе сценарийлерді (скрипттерді) қолдамайды. SVG Basic смартфондар сияқты жоғары деңгейдегі мобильді құрылғылар үшін анықталды. 2003 жылы 3GPP халықаралық телекоммуникациялық стандарттар тобы SVG Tiny-ді келесі буын телефондар үшін міндетті векторлық графикалық медиа форматы ретінде қабылдады. SVGT – қажетті векторлық графика форматы, ал SVGB-ні қолдау Мультимедиялық хабарламалар қызметі (MMS) және пакеттік коммутациялық ағындық қызмет үшін қосымша болып табылады. Кейіннен ол 3GPP IP мультимедиялық кіші жүйесінде (IMS) векторлық графика үшін қажетті формат ретінде қосылды. Ешбір мобильдік профиль толық Document Object Model (DOM) қолдауын қамтымайды, ал сценарийлерді (скрипттерді) қолдау тек SVG Basic-те ғана қосымша мүмкіндік ретінде ұсынылады, бірақ олар толық стандарттың толыққанды үйлесімді ішкі жиынтықтары болғандықтан, көптеген SVG графикалық элементтерін тек мобильдік профильдерді қолдайтын құрылғыларда да көрсетуге болады. SVGT 1.2 микроDOM (μDOM), стильдеу және сценарийлерді (скрипттерді) қосады. SVGZ файлы әдетте бастапқы көлемінен 20-дан 50 пайызға дейін кіші болады. W3C сәйкестікті тексеру үшін SVGZ файлдарын ұсынады.

Іске асыру

SVG-ді вебте қолдану, ескі Internet Explorer (IE) нұсқаларында қолдау болмауына байланысты шектеулі болды. SVG суреттерін ұсынатын көптеген веб-сайттар осы суреттерді растрлық форматта да ұсынады, бұл HTTP мазмұнын автоматты түрде келісу арқылы немесе пайдаланушыға файлды тікелей таңдау мүмкіндігі арқылы жүзеге асырылады.

Веб-браузерлер

Konqueror 2004 жылдың ақпан айында 3.2 нұсқасында SVG-ні қолдаған алғашқы браузер болды. 2011 жылдан бастап барлық негізгі десктоп браузерлері және көптеген кіші браузерлер SVG-ні белгілі бір деңгейде қолдайды. Басқа браузерлердің іске асырылуы әлі толыққан емес; толыққан мәліметтер үшін макет қозғалтқыштарын салыстыруға қараңыз. Firefox-тың кейбір ерте нұсқалары (мысалы, 1.5 және 3.6 арасындағы нұсқалар), сондай-ақ SVG графикасын көрсетуге қабілетті басқа ескірген веб-браузерлердің бірқатар нұсқалары, оларды HTML веб-беттің бөлігі ретінде интеграциялау үшін <img> арқылы стандартты тәсілді пайдаланудың орнына <object> немесе <iframe> элементтеріне ендіруді қажет етті. Дегенмен, SVG кескіндерін XML атау кеңістіктерін пайдаланып XHTML беттеріне қосуға болады. World Wide Web-тің авторы Тим Бернерс-Ли SVG-ні қолдамағаны үшін Internet Explorer-дің алғашқы нұсқаларын сынады. Opera (8.0 нұсқасынан бастап) SVG 1.1 Tiny спецификациясын қолдайды, ал Opera 9 SVG 1.1 Basic қолдауын және SVG 1.1 Full-дың бір бөлігін қамтиды. Opera 9.5 SVG Tiny 1.2 спецификациясын ішінара қолдайды. Ол сондай-ақ SVGZ (құрылған SVG) қолдауын ұсынады. Gecko макет қозғалтқышына негізделген браузерлер (Firefox, Flock, Camino және SeaMonkey сияқты) 2005 жылдан бері SVG 1.1 Full спецификациясын толыққанды қолдамайды. Mozilla сайтында Firefox-та қолдау көрсетілетін модульдер мен әзірлену үстіндегі модульдер туралы ақпарат бар. Firefox 3.0-ға енгізілген Gecko 1.9, SVG спецификациясының көбіне (фильтрлерді қоса алғанда) қолдау қосады. Goanna макет қозғалтқышын (Gecko қозғалтқышының түйіндемесі) пайдаланатын Pale Moon SVG-ні қолдайды. WebKit-ке негізделген браузерлер (мысалы, Apple-дің Safari, Google Chrome және The Omni Group-тың OmniWeb) 2006 жылдан бері SVG 1.1 Full спецификациясын толыққанды қолдамайды. Amaya SVG-ні ішінара қолдайды. Internet Explorer 8 және одан бұрынғы нұсқалары SVG-ні қолдамайды. IE9 (2011 жылдың 14 наурызында шығарылды) SVG-нің негізгі мүмкіндіктерін қолдайды. IE10 SVG 1.1 фильтрлерін қосу арқылы SVG қолдауын кеңейтті. Microsoft Edge Legacy SVG 1.1-ді қолдайды. Maxthon Cloud браузері де SVG-ні қолдайды. Туған және толық қолдаудың бірнеше артықшылықтары бар: плагиндер қажет емес, SVG бір құжатта басқа мазмұнмен еркін үйлеседі, ал көрсету және сценарийлеу айтарлықтай сенімді болады.

Мобильді құрылғылар

Ескі немесе мүмкіндіктері шектеулі смартфондарда SVG қолдауы SVGT-мен шектелуі мүмкін немесе олардың тиісті операциялық жүйесімен шектелуі мүмкін. Adobe Flash Lite 1.1 нұсқасынан бастап SVG Tiny қолдауын ұсынады. SVG Open 2005 конференциясында Sun компаниясы Connected Limited Device Configuration (CLDC) платформасы үшін SVG Tiny 1.1 мобильдік нұсқасын көрсетті. Opera Mobile қолданатын ұялы телефондар, сондай-ақ iPhone құрамындағы браузер де SVG қолдауын қамтиды. Дегенмен, WebKit қозғалтқышын пайдаланғанына қарамастан, Android браузері v3.0 (Honeycomb) нұсқасына дейін SVG-ні қолдамады. v3.0 нұсқасына дейін Android үшін Firefox Mobile 4.0b2 (бета) SVG-ні әдепкі бойынша қолдайтын Android-те жұмыс істейтін алғашқы браузер болды. Орнатылған SVG қозғалтқышына байланысты SVG Tiny қолдауының деңгейі әрбір ұялы телефонда әртүрлі болуы мүмкін. Көптеген жаңа ұялы құрылғылар SVG Tiny 1.1-ден асып түсетін қосымша мүмкіндіктерді, мысалы, градиент және мөлдірлікті қолдайды; мұндай мүмкіндіктер кейде "SVGT 1.1+" деп аталады, бірақ мұндай стандарт жоқ. RIM-нің BlackBerry 5.0 нұсқасынан бастап SVG Tiny 1.1 қолдауын енгізді. WebKit негізіндегі BlackBerry Torch браузеріне қолдау 6 және 7 операциялық жүйелерінде жалғасуда. Nokia S60 платформасы SVG-ні қолдайды. Мысалы, белгішелер әдетте платформаның SVG қозғалтқышын пайдаланып көрсетіледі. Nokia сондай-ақ SVG көрсетілімі мен өңдеуі үшін Java ME API-ді анықтайтын JSR 226: Масштабируленген 2D векторлық графика API сарапшы тобын басқарды. Бұл API S60 платформасының 3-ші нұсқасының 1-ші толыққанды жиынтығында және одан кейінгі нұсқаларында жүзеге асырылды. Кейбір 40-сериялы телефондар да SVG-ні қолдайды (мысалы, Nokia 6280). Sony Ericsson телефондарының көпшілігі K700 моделінен бастап (шығарылған күні бойынша) SVG Tiny 1.1 қолдауын ұсынады. K750 моделінен басталатын телефондар мөлдірлік және градиенттер сияқты мүмкіндіктерді де қолдайды. Sony Ericsson Java Platform 8 бар телефондар JSR 226 стандартын қолдайды. Windows Phone 7.5 нұсқасынан бастап SVG қолдау көрсетіледі. SVG сонымен қатар Motorola, Samsung, LG және Siemens mobile/BenQ Siemens компанияларының түрлі ұялы құрылғыларында қолдауға ие. eSVG, негізінен кіріктірілген құрылғылар үшін жазылған SVG рендеринг кітапханасы, кейбір ұялы платформаларда қол жетімді.

Авторлық

SVG кескіндерін Inkscape, Adobe Illustrator, Adobe Flash Professional немесе CorelDRAW сияқты векторлық графика редакторының көмегімен жасауға болады және сол бағдарламалық жасақтаманы пайдаланып, PNG сияқты кең таралған растрлық кескін форматтарына түрлендіруге болады. Сонымен қатар, Inkscape және Boxy SVG сияқты редакторлар растрлық кескіндерді Безиер қисықтарына түрлендіруге арналған құралдарды ұсынады, әдетте potrace, autotrace және imagetracerjs сияқты кескін іздеу жүйелері арқылы. Бағдарламалық жасақтаманы SVG кескіндерін көрсету үшін 2000 жылдан бері GNOME қолданатын librsvg сияқты кітапхананы, ал 2020 жылдан бастап жеңіл жүйелер үшін Batik және Thor Vector Graphics (ThorVG) бағдарламаларын пайдалану арқылы бағдарламалауға болады. SVG кескіндерін ImageMagick, тегін командалық қатарлық утилита (ол librsvg-ді де пайдаланады) арқылы кез келген қажетті кескін форматына түрлендіруге болады. Веб-қосымшалар үшін Inline SVG деп аталатын пайдалану режимі <svg> тегін пайдаланып SVG мазмұнын HTML құжатының ішіне енгізуге мүмкіндік береді. Оның графикалық мүмкіндіктерін SVG мен HTML ортақ контекст, оқиғаларды өңдеу және CSS арқылы күрделі пайдаланушы интерфейстерін жасау үшін пайдалануға болады. SVG-нің басқа да қолданыс орындарына мәтіндік редакторларда (мысалы, LibreOffice), беттік басылымдарда (мысалы, Scribus) қолдану, графиктің сызбаларын жасау (мысалы, gnuplot) және жолдарды импорттау (мысалы, GIMP немесе Blender) жатады. Microsoft 365 және Microsoft Office 2019 қосымша қызметтері SVG кескіндерін экспорттау, импорттау және өңдеуді қолдайды. Apple қолданатын SVG-нің бірыңғай типтік идентификаторы ашық, public.svg кескіні және public.image және public.xml стандарттарына сәйкес келеді.

Қауіпсіздік

HTML құжаттарына ұқсас құжат форматы ретінде SVG скрипт немесе CSS-ті қамтамасыз ете алады. Егер шабуылшы веб-сайтқа, мысалы, профиль суреті ретінде SVG файлын жүктеп, ол файл әдеттегі сурет ретінде қаралып, бірақ зиянды мазмұнға ие болса, бұл мәселе туындайды. Мысалы, SVG файлы CSS фондық сурет ретінде, немесе қандай да бір веб-сайттағы логотип ретінде, немесе суреттер галереясында қолданылса, браузерде жүктелген кезде скрипт немесе басқа мазмұн іске қосылады. Бұл браузерді тоқтата білуі мүмкін (миллиард күлкі шабуылы), сондай-ақ HTML инъекциясы және сайттар аралық скрипттер шабуылына әкелуі мүмкін. Сондықтан W3C SVG тек сурет ретінде қолданылғанда белгілі бір талаптарды қояды: SVG Security. W3C-нің айтуынша, Inline SVG (веб-сайтқа тікелей жүктелген SVG файлы) қауіпсіздік тұрғысынан кем қауіпті, себебі мазмұн үлкен құжаттың бөлігі болып табылады, сондықтан скрипттер мен CSS күтпеген нәрсе емес. Ол MPEG (ISO/IEC JTC 1/SC29/WG11) ұйымымен әзірленді және ISO/IEC 14496 20:2006 ретінде жарияланды. SVG мүмкіндіктері MPEG 4 20-бөлімінде мобильді қызметтерге арналған динамикалық жаңартулар, бинарлық кодтау, қаріптерді көрсетудің заманауи әдістері сияқты негізгі мүмкіндіктермен кеңейтілді. SVG сонымен қатар MPEG 4 11-бөлімінде, кеңейтілген MPEG 4 мәтіндік (XMT) форматында, XML-ді пайдалана отырып MPEG 4 мультимедиа мазмұнының мәтіндік бейнеленуі ретінде де қолданылды.