SVG
Material iz Vikipedii -- svobodnoi entsiklopedii
Pereiti k navigatsii
Pereiti k poisku
| Masshtabiruemaia vektornaia grafika | |
|---|---|
| Rasshirenie |
.svg ili .svgz |
| MIME-tip | image/svg+xml i image/SVG |
| Razrabotchik | Konsortsium Vsemirnoi pautiny |
| Poslednii vypusk |
SVG Tiny 1.2 SVG 1.1 (Second Edition) SVG 2 |
| Tip formata | Vektornaia grafika |
| Rasshiren iz | XML |
| Otkrytyi format? | Da |
| Sait | w3.org/Graphics/S... (angl.) |
| Mediafaily na Vikisklade | |
SVG (ot angl. Scalable Vector Graphics -- masshtabiruemaia vektornaia grafika) -- iazyk razmetki masshtabiruemoi vektornoi grafiki, sozdannyi Konsortsiumom Vsemirnoi pautiny (W3C) i vkhodiashchii v podmnozhestvo rasshiriaemogo iazyka razmetki XML, prednaznachen dlia opisaniia dvumernoi vektornoi i smeshannoi vektorno/rastrovoi grafiki v formate XML. Podderzhivaet kak nepodvizhnuiu, tak i animirovannuiu interaktivnuiu grafiku -- ili, v inykh terminakh, deklarativnuiu i skriptovuiu. Ne podderzhivaet opisaniia triokhmernykh ob'ektov (ne putat' s imitatsiei triokhmernosti putiom svetoteni). Eto otkrytyi standart, kotoryi iavliaetsia rekomendatsiei konsortsiuma W3C -- organizatsii, razrabotavshei takie standarty, kak HTML i XHTML. V osnovu SVG legli iazyki razmetki VML i PGML. Razrabatyvaetsia s 1999 goda. V 2001 godu vyshla versiia 1.0, v 2011 -- versiia 1.1, kotoraia ostaiotsia aktual'noi do segodniashnego[kakogo?] dnia. V nastoiashchee vremia[kogda?] v aktivnoi razrabotke nakhoditsia versiia 2.
Vozmozhnosti iazyka
[pravit' | pravit' kod]- Opisanie putei (angl. path). Pozvoliaet zadat' liubuiu figuru kompaktnoi strokoi, opisyvaiushchei put' ot nachal'noi tochki do konechnoi cherez liubye promezhutochnye koordinaty. Stroka s dannymi zadaiotsia atributom
dtegapathi soderzhit komandy, zakodirovannye naborom bukv i chisel. Bukva opredeliaet tip komandy, chisla -- eio parametry (chashche vsego -- koordinaty). Komandy pozvoliaiut opisyvat' figury, sostoiashchie iz otrezkov priamykh (L,H,V), krivykh Bez'e (C,S,Q,T) i dug (A). Primer, opisyvaiushchii zvezdu iz 5 linii, soderzhit stroku dannykh s komandamiM(angl. moveto -- peremestit'sia k) iL(angl. lineto -- narisovat' liniiu k), soderzhashchimi v kachestve argumentov koordinaty tochek po X i Y. V versiiakh SVG do 1.2 vkliuchitel'no opisanie putei vozmozhno tol'ko v pikseliakh.
stroke="black" d="M 228 238 L 328 90 L 346 250 L 201 124 L 410 150 L 228 238" />
- Opisanie osnovnykh geometricheskikh figur (mnogougol'niki, priamougol'niki, okruzhnosti i t. p.).
- Shirokii spektr vizual'nykh svoistv, kotorye mozhno primenit' k figuram i putiam: okraska, prozrachnost', skruglenie uglov i t. d.
- Interaktivnost'. Na kazhdyi otdel'nyi element i na tseloe izobrazhenie mozhno povesit' obrabotchik sobytii (klik, peremeshchenie, nazhatie klavishi i t.d), takim obrazom, pol'zovatel' mozhet upravliat' risunkom (naprimer -- peremeshchat' myshkoi nekotorye elementy[1]).
- Animatsiia i stsenarii. S pomoshch'iu ECMAScript ili JavaScript mozhno opisyvat' dazhe samye slozhnye stsenarii, sviazannye s matematicheskimi vychisleniiami koordinat i proportsii figur. Vmeste s interaktivnost'iu i SMIL-animatsiei eto daiot ochen' shirokie vozmozhnosti dlia razrabotchikov veb-grafiki.
Dostoinstva formata
[pravit' | pravit' kod]
- Tekstovyi format -- faily SVG mozhno chitat' i redaktirovat' (pri nalichii nekotorykh navykov) pri pomoshchi obychnykh tekstovykh redaktorov. Pri prosmotre dokumentov, soderzhashchikh SVG-grafiku, imeetsia dostup k prosmotru koda prosmatrivaemogo faila i vozmozhnost' sokhraneniia vsego dokumenta. Krome togo, SVG-faily obychno poluchaiutsia men'she po razmeru, chem sravnimye po kachestvu izobrazheniia v formatakh JPEG ili GIF, a takzhe khorosho poddaiutsia szhatiiu.
- Masshtabiruemost' -- SVG iavliaetsia vektornym formatom. Sushchestvuet vozmozhnost' uvelichit' liubuiu chast' izobrazheniia SVG bez poteri kachestva. Dopolnitel'no, k elementam SVG-dokumenta vozmozhno primeniat' fil'try -- spetsial'nye modifikatory dlia sozdaniia effektov, podobnykh primeniaemym pri obrabotke rastrovykh izobrazhenii (razmytie, vydavlivanie, slozhnye sistemy transformatsii i dr.). V tekste SVG-koda fil'try opisyvaiutsia tegami, vizualizatsiiu kotorykh obespechivaet sredstvo prosmotra, chto ne vliiaet na razmer iskhodnogo faila, obespechivaia pri etom neobkhodimuiu illiustrativnuiu vyrazitel'nost'.
- Shiroko dostupno ispol'zovanie rastrovoi grafiki v SVG-dokumentakh. Imeetsia vozmozhnost' vstavliat' elementy s izobrazheniiami v formatakh PNG, GIF ili JPG.
- Tekst v grafike SVG iavliaetsia tekstom, a ne izobrazheniem, poetomu ego mozhno vydeliat' i kopirovat', on indeksiruetsia poiskovymi mashinami, ne nuzhno sozdavat' dopolnitel'nye metafaily dlia poiskovykh robotov.
- Animatsiia realizovana v SVG s pomoshch'iu iazyka SMIL (Synchronized Multimedia Integration Language), razrabotannogo takzhe konsortsiumom W3C. Podderzhivaiutsia skriptovye iazyki na osnove spetsifikatsii ECMAScript. SVG-elementami mozhno upravliat' s pomoshch'iu JavaScript. Primenenie skriptov i animatsii v SVG pozvoliaet sozdavat' dinamichnuiu i interaktivnuiu grafiku. V SVG obespechivaetsia sobytiinaia model', otslezhivaiutsia sobytiia (zagruzka stranitsy, izmenenie eio parametrov, sobytiia myshi, klaviatury i dr.). Animatsiia mozhet zapuskat'sia po opredelionnomu sobytiiu (naprimer <
> ili < ), chto pridaiot grafike interaktivnost'. U kazhdogo elementa est' svoi sobstvennye sobytiia, k kotorym mozhno priviazyvat' otdel'nye skripty.> - SVG -- otkrytyi standart. V otlichie ot nekotorykh drugikh formatov, SVG ne iavliaetsia ch'ei-libo sobstvennost'iu.
- SVG-dokumenty legko integriruiutsia s HTML- i XHTML-dokumentami. Vneshnie SVG podkliuchaiutsia cherez teg , znachenie atributa data -- imia faila s rasshireniem <<.svg>>, soderzhashchego razmetku SVG, i imeiushchego MIME-tip image/svg+xml. Atributy width i height opredeliaiut razmery oblasti SVG po gorizontali i po vertikali. Elementy SVG sovmestimy s HTML i DHTML.
- Sovmestimost' s CSS (angl. Cascading Style Sheets). Otobrazheniem (formatirovaniem i dekorirovaniem) SVG-elementov mozhno upravliat' s pomoshch'iu tablitsy stilei CSS 2.0 i eio rasshirenii libo napriamuiu s pomoshch'iu atributov SVG-elementov.
- SVG predostavliaet vse preimushchestva XML:
- Vozmozhnost' raboty v razlichnykh sredakh.
- Internatsionalizatsiia (podderzhka Iunikoda).
- Shirokaia dostupnost' dlia razlichnykh prilozhenii.
- Liogkaia modifikatsiia cherez standartnye API -- naprimer, DOM. SVG podderzhivaet standartizirovannuiu W3C ob'ektnuiu model' dokumenta DOM, obespechivaia dostup k liubomu elementu, chto daiot shirokie vozmozhnosti po dinamicheskomu izmeneniiu elementov, ikh atributov i sobytii.
- Liogkoe preobrazovanie tablitsami stilei XSLT. Kak liuboi osnovannyi na XML format, SVG daiot vozmozhnost' ispol'zovat' dlia ego obrabotki tablitsy transformatsii (XSLT). Preobrazuia XML-dannye v SVG s pomoshch'iu prostogo XSL, mozhno legko poluchit' graficheskoe predstavlenie liubykh dannykh, naprimer vizualizirovat' khimicheskie molekuly, opisannykh na iazyke CML.
Nedostatki formata
[pravit' | pravit' kod]- Polnost'iu otsutstvuet podderzhka triokhmernoi grafiki
- SVG nasleduet vse nedostatki XML, takie kak bol'shoi razmer faila (vprochem, poslednii kompensiruetsia sushchestvovaniem szhatogo formata SVGZ, odnako ego ispol'zovanie na dannyi moment zatrudneno, tak kak SVGZ ne imeet sobstvennogo MIME-tipa).
- Slozhnost' ispol'zovaniia v krupnykh kartograficheskikh prilozheniiakh zakliuchaetsia v tom, chto dlia pravil'nogo otobrazheniia malen'koi chasti izobrazheniia dokument neobkhodimo prochitat' tselikom.
- Chem bol'she v izobrazhenii melkikh detalei, tem bystree rastiot razmer SVG-dannykh. Predel'nyi sluchai -- kogda izobrazhenie predstavliaet soboi belyi shum: v etom sluchae SVG ne tol'ko ne daiot nikakikh preimushchestv v razmere faila, no dazhe daiot proigrysh po sravneniiu s rastrovym formatom. Na praktike SVG stanovitsia nevygoden uzhe zadolgo do togo, kak izobrazhenie dokhodit do stadii belogo shuma.
Struktura dokumenta SVG
[pravit' | pravit' kod]Pervaia stroka -- standartnyi XML-zagolovok, ob'iavlenie (angl. XML declaration), ukazyvaiushchee versiiu XML (version) (obychno <<1.0>>) i kodirovku simvolov (encoding):
Vo vtoroi i tret'ei strokakh dolzhen raspolagat'sia zagolovok DOCTYPE, opredeliaiushchii tip dokumenta (angl. Document Type Definitions) DTD:
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
V nekotorykh sluchaiakh pri primenenii Mozilla Firefox so vstroennym prosmotrshchikom SVG soderzhanie ob'iavleniia DOCTYPE mozhet byt' istochnikom oshibok. Imeiutsia rekomendatsii ne ispol'zovat' deklaratsiiu DOCTYPE v SVG versii 1.0. Vmesto etogo rekomendovano vkliuchat' v kornevoi element atribut baseProfile so znacheniem <
Esli po kakim-to prichinam deklaratsiia DOCTYPE v dokumente neobkhodima, rekomendovano ispol'zovat' pustuiu deklaratsiiu, kak v primere.
]>
V chetviortoi stroke razmeshchaetsia kornevoi element dokumenta s ukazaniem prostranstva imion SVG.
baseProfile="full"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:ev="http://www.w3.org/2001/xml-events"
width="100%" height="100%">
Dalee idiot ostal'noi tekst dokumenta, vlozhennyi v kornevoi element, gde sobstvenno raspolagaiutsia elementy, opisyvaiushchie soderzhanie kodiruemoi stseny.
Zavershaetsia dokument vsegda zakrytiem kornevogo tega .
Primery
[pravit' | pravit' kod]- Prostoi statichnyi SVG-dokument s konturom kvadrata razmerom 400 pikselei i tremia poluprozrachnymi krugami radiusom 104 pikselia po tsentru kvadrata, kazhdyi krug smeshchaetsia ot tsentra kvadrata primerno na polradiusa.
baseProfile="full"
xmlns = "http://www.w3.org/2000/svg"
xmlns:xlink = "http://www.w3.org/1999/xlink"
xmlns:ev = "http://www.w3.org/2001/xml-events"
height = "400px" width = "400px">
fill="none" stroke="black" stroke-width="5px" stroke-opacity="0.5"/>
Primechanie: Etot kod vypolniaetsia odinakovo v Mozilla Firefox 2.0.0.11 i v Internet Explorer 6.0.2900.2180 (SVG Document Adobe Systems Inc.)
- Eshchio odin primer -- priamougol'nik s zakruglionnymi uglami, zapolniaiushchii vsiu oblast' otobrazheniia:
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
baseProfile="full"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:ev="http://www.w3.org/2001/xml-events"
width="100%" height="100%">
- Zhioltaia zvezda:
viewBox="0 0 198 188"
version="1.1"
baseProfile="full"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:ev="http://www.w3.org/2001/xml-events">
points="99 154 40 185 51 119 4 73 69 64 99 3 128 64 194 73 147 119 158 185 ">
SVGZ
[pravit' | pravit' kod]Poskol'ku kod SVG zanimaet dovol'no mnogo mesta, byla sozdana <
SVG khorosho szhimaetsia, poskol'ku eto tekstovyi XML-dokument, imeiushchii reguliarnuiu strukturu.
Podderzhka v brauzerakh
[pravit' | pravit' kod]| brauzer | versiia |
|---|---|
| Internet Explorer | 9+[3] |
| Mozilla Firefox | 1.5+[4] |
| Netscape Navigator | 9.0+ |
| Google Chrome | 3.0+ |
| Safari | 4.0+ |
| Opera | 8.0+ |
Spetsifikatsii standarta
[pravit' | pravit' kod]- SVG 1.2 (predvaritel'nyi)
- SVG 1.1
- SVG Mobil'nyi 1.2 (predvaritel'nyi)
- SVG Mobil'nyi
- SVG Pechat'
- SVG Trebovaniia (predvaritel'nyi)
Programmnoe obespechenie
[pravit' | pravit' kod]Prilozheniia
[pravit' | pravit' kod]- Adobe GoLive versii ot CS2 -- HTML-redaktor.
- Adobe Illustrator versii ot 10.0 -- vektornyi graficheskii redaktor.
- CorelDRAW -- vektornyi graficheskii redaktor.
- GIMP -- svobodnyi krossplatformennyi rastrovyi graficheskii redaktor; pozvoliaet otkryvat' SVG-faily, pri importe proiskhodit rasterizatsiia s zadannym razresheniem.
- Inkscape -- svobodnyi krossplatformennyi vektornyi graficheskii redaktor; ispol'zuet SVG kak osnovnoi format.
- LibreOffice Draw, OpenOffice.org Draw -- pozvoliaet eksportirovat' i importirovat' SVG-faily.
- Microsoft Office Visio -- sposoben sokhraniat' proekty v format SVG. Pri etom, faily SVG, sozdannye v Microsoft Visio, nekorrektno otobrazhaiutsia pri zagruzke na Wikimedia.
- sK1 -- svobodnyi vektornyi graficheskii redaktor.
- Sketch -- tol'ko dlia macOS.
- Sketsa SVG Editor -- redaktor SVG-failov.
- svg-edit -- onlain redaktor dlia sovremennykh brauzerov. Baziruetsia na JavaScript.
Instrumenty i biblioteki
[pravit' | pravit' kod]- Batik -- Java-biblioteka dlia generatsii, otrisovki i razlichnykh manipuliatsii izobrazheniiami v SVG-formate i osnovannyi na etoi biblioteke SVG-brauzer -- Squiggle[5].
- MetaPost -- iazyk programmirovaniia, ispol'zuemyi dlia sozdaniia graficheskikh illiustratsii.
- librsvg -- biblioteka, ispol'zuemaia v MediaWiki dlia raboty s SVG[6][7].
- SVG Viewer Extension for Windows Explorer -- rasshirenie dlia provodnika Windows, pozvoliaiushchee prosmatrivat' v niom SVG-faily v vide eskizov.
- Snap -- biblioteka JavaScript dlia raboty s SVG.
- SVG.js -- oblegchionnaia biblioteka dlia upravleniia i animirovaniia SVG-grafiki, ne imeet zavisimostei i stremitsia byt' kak mozhno men'she.
Primechaniia
[pravit' | pravit' kod]- | Primer stranitsy, pozvoliaiushchei sozdavat' i redaktirovat' SVG v brauzere Arkhivnaia kopiia ot 19 maia 2010 na Wayback Machine (rus.)
- | SVG Authoring Guidelines:Don't include a DOCTYPE declaration Arkhivnaia kopiia ot 14 aprelia 2008 na Wayback Machine (angl.)
- | Windows Internet Explorer Platform Preview Release Notes Arkhivirovano 19 aprelia 2010 goda. (angl.)
- | Brockmeier, Joe (30 noiabria 2005). Review: Firefox 1.5 and Thunderbird 1.5. Linux.com (angl.). Data obrashcheniia: 30 noiabria 2009.
- | Squiggle Arkhivnaia kopiia ot 7 noiabria 2009 na Wayback Machine.
- | Manual:Image Administration -- MediaWiki Arkhivnaia kopiia ot 18 noiabria 2008 na Wayback Machine (angl.)
- | Odnako, v standartnom distributive MediaWiki po umolchaniiu propisan ImageMagick, chto privodit k oshibkam v preobrazovanii SVG v PNG, naprimer, nevernye granitsy i otsutstvie prozrachnogo fona v poluchaemom faile PNG. Ustraniaetsia s pomoshch'iu $wgSVGConverter = 'rsvg'.
Ssylki
[pravit' | pravit' kod]- Ofitsial'nyi razdel SVG na saite W3 konsortsiuma (angl.)
- Spisok podderzhivaemykh elementov SVG v brauzere Opera (angl.)
- Stat'i o vozmozhnostiakh SVG ot razrabotchikov Opery (angl.)
- FAQ (angl.) o realizatsii SVG v brauzere Mozilla Firefox
- Stranitsa (angl.) formata SVG na saite Adobe
- Shkoly konsortsiuma W3C. Vvedenie v SVG (rus.)
- Otkrytye SVG kliparty (openclipart.org)
- Opisanie chertezhei v formate SVG (v.sytnik.lviv.ua) (rus.)
- Kak ispol'zovat' SVG dlia sozdaniia veb-animatsii pod vse tipy ustroistv
Literatura
[pravit' | pravit' kod]- * Ben Frein. Glava 7. Ispol'zovanie SVG dlia dostizheniia nezavisimosti ot razresheniia. // HTML5 i CSS3. Razrabotka saitov dlia liubykh brauzerov i ustroistv = Responsive Web Design with HTML5 and CSS3. Second Edition. PACKT publishing. -- 2 izdanie. -- Sankt-Peterburg: Piter, 2017. -- S. 175-204. -- 272 s. -- ISBN 978-1784398934 angl. 978-5-496-02271-2.