SVG näme? Wektor formaty boýunça gollanma

SVG pikselden däl-de, çyzgy görkezmelerinden ybarat surat formatydyr. Logotip, nyşan ýa-da diagramma SVG hökmünde ýatda saklananda faýlda "şu nokatdan şol nokada egri çyz we ony şu reňk bilen doldur" ýaly buýruklar bolýar. Şonuň üçin SVG islendik ölçegde ýiti galýar, köplenç örän kiçi bolýar we ony tekst redaktorynda açyp redaktirläp bolýar. Bu makalada SVG-niň W3C standartlarynyň arasyndaky orny, faýlyň gurluşy, brauzer we programma goldawy, howpsuzlyk howplary hem-de SVG bilen PNG ýa-da JPG arasynda nädip öwürmelidigi düşündirilýär.

SVG näme?

SVG (Scalable Vector Graphics, masştablanýan wektor grafikasy) iki ölçegli wektor grafikasyny beýan etmek üçin XML esasly W3C standartydyr. Giňeltmesi .svg, MIME görnüşi bolsa image/svg+xml. Gzip bilen gysylan görnüşi .svgz giňeltmesini ulanýar.

Raster formatlar (JPG, PNG, WebP) suraty berkidilen piksel tory hökmünde saklaýar; ony ulaltsaňyz pikseller görnüp başlaýar. SVG bolsa şekilleri matematiki taýdan beýan edýär we brauzer ýa-da programma olary ekranyň çözgüdine görä täzeden çekýär. MDN-iň surat formatlary boýunça gollanmasy SVG-ni çyzgy buýruklary bilen aňladyp bolýan suratlar üçin, esasan-da görkeziş ölçegi näbelli ýa-da üýtgeýän ýagdaýynda ideal saýlaw diýip atlandyrýar we onuň fotosuratlar üçin umuman peýdaly däldigini belleýär.

Taryhy: SVG 1.0, 1.1 we SVG 2

• 2001-nji ýylyň 4-nji sentýabry: SVG 1.0 W3C Teklibi hökmünde çap edildi.
• 2003-nji ýylyň 14-nji ýanwary: SVG 1.1 Teklip boldy. 1.1 dili modullara böldi, bu bolsa mobil profiller ýaly kiçi toplumlary kesgitlemegi ýeňilleşdirdi.
• 2011-nji ýylyň 16-njy awgusty: SVG 1.1 Ikinji Neşiri çap edildi. Bu häzir brauzerleriň daýanýan durnukly wersiýasydyr.
• SVG 2: W3C-niň çap ediliş taryhyna görä, iş taslamalary 2012-nji ýyldan peýda boldy we ilkinji Candidate Recommendation Snapshot 2016-njy ýylyň 15-nji sentýabrynda çap edildi. Iň soňky snapshot 2026-njy ýylyň 6-njy oktýabryna degişli; resminama henizem Candidate Recommendation tapgyrynda.

SVG 2 1.1 Ikinji Neşirine daýanýar we HTML hem CSS bilen has gowy utgaşmagy maksat edinýär. Süzgüçler, maskalamak we şriftler ýaly käbir temalar aýry CSS we FX modullaryna geçdi. Amalda brauzerler SVG 2-niň käbir böleklerini durmuşa geçirýär, şonuň üçin her mümkinçiligiň hemme ýerde işleýär diýip pikir etmäň.

SVG faýlynyň gurluşy

Ýönekeý SVG faýly şeýle görünýär:

<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>

Koordinat ulgamy: viewBox, width we height

viewBox çyzgynyň içki koordinat ulgamyny kesgitleýär (bu ýerde 0-dan 100-e çenli). width we height çyzgynyň sahypada näçe ýer tutýandygyny kesgitleýär. viewBox-ly SVG CSS-de berýän islendik ölçegiňize deňölçegli uýgunlaşýar. viewBox-syz faýllar ölçegi üýtgedilende kesilip bilner, bu bolsa logotiplerdäki iň ýygy ýalňyşlyklaryň biridir.

Esasy elementler

• Şekiller: rect, circle, ellipse, line, polyline, polygon we islendik zady çyzyp bilýän path.
• Tekst: text we tspan. Tekst saýlanýan we gözlenýän bolup galýar, ýöne görkezýän enjamda şrift ýok bolsa, ätiýaçlyk şrift ulanylýar.
• Toparlamak we gaýtadan ulanmak: g, defs, symbol, use. Nyşan toplumlary köplenç bir faýlda symbol elementleri hökmünde jemlenýär.
• Reňklemek: birsydyrgyn reňkler, çyzykly we radial geçişler, nagyşlar, kesiş ýollary, maskalar we süzgüçler (bulaşdyrmak, kölege).
• Stil we animasiýa: CSS SVG-ni bezäp bilýär; CSS animasiýalary we SMIL animasiýa elementleri hereket goşýar.
• Goşulan mazmun: raster suratlar üçin image, HTML üçin foreignObject we JavaScript üçin script.

Reňk, aýdynlyk, gatlaklar we sahypalar

SVG-de aýdynlyk tebigy: çyzylmadyk zat boşdur, opacity we fill-opacity bolsa ýarym aýdynlygy kesgitleýär. Gatlaklar g toparlary bilen görkezilýär; Inkscape we Illustrator öz gatlaklaryny şeýle saklaýar. Reňkler adaty ýagdaýda sRGB we reňkler san hökmünde ýazylýandygy sebäpli adaty manydaky bit çuňlugy çägi ýok. SVG köp sahypaly resminama formaty däl; köp sahypaly çyzgylar üçin PDF has laýyk.

Brauzerlerde, ulgamlarda we programmalarda goldaw

MDN-e görä, Chrome, Edge, Firefox, Opera we Safari-niň hemmesi SVG-ni goldaýar. Ony <img> arkaly, CSS background-image hökmünde, HTML-iň içinde göni ýa-da <object> we <iframe> bilen ulanyp bilersiňiz. Inkscape, Adobe Illustrator, Affinity Designer we Figma ýaly wektor gurallary SVG-ni okaýar we ýazýar, Microsoft Office-iň häzirki wersiýalary bolsa SVG grafikasyny goýmaga mümkinçilik berýär.

Beýleki ýerlerde goldaw gowşak: köp sosial torlar, e-poçta programmalary, habarlaşma programmalary we ýükleme formalary SVG-ni ret edýär ýa-da deslapky görnüşini görkezmeýär. Munuň bir sebäbi aşakda beýan edilen howpsuzlyk howpudyr.

Howpsuzlyk: SVG-ä resminama ýaly garaň

SVG XML resminamasydyr we onda script elementi, waka atributlary (meselem onload) we daşarky salgylanmalar bolup biler. MDN-iň "SVG as an image" sahypasy SVG <img> ýa-da CSS fony arkaly ulanylanda brauzerleriň JavaScript-i öçürýändigini we şekiller ýa-da stil tablisalary ýaly daşarky çeşmeleri ýüklemeýändigini düşündirýär. Faýl göni açylanda ýa-da <iframe>, <object> ýa-da <embed> bilen goşulanda bu çäklendirmeler ulanylmaýar.

Amaly netije: saýt ulanyjylara SVG faýllaryny ýüklemäge rugsat berýän bolsa we olary göni öz domeninden berýän bolsa, faýla goşulan skript şol saýtyň kontekstinde işläp biler (saklanýan XSS). Adaty goranyş çäreleri:

• Ýüklenen SVG-ni script-i, waka atributlaryny, foreignObject-i we daşarky salgylary aýyrýan arassalaýjydan geçiriň.
• Ulanyjy faýllaryny aýry domenden, berk Content-Security-Policy bilen ýa-da ýükläp almak hökmünde (Content-Disposition: attachment) beriň.
• Wektor gerek däl bolsa, ýüklenen SVG-ni serwerde PNG-e öwrüň we diňe raster görnüşini çap ediň.

Adaty ulanylyşlar

• Logotipler we marka serişdeleri: bir faýl wizit kartlaryndan mahabat şitlerine çenli ýiti galýar.
• Interfeýs nyşanlary: CSS bilen reňklenýär we ýokary dykyzlykly ekranlarda hiç haçan bulanyk bolmaýar.
• Diagrammalar, kartalar we shemalar: D3.js ýaly kitaphanalar maglumatlary göni SVG elementlerine çekýär.
• Faviconlar: häzirki brauzerler SVG faviconlaryny <link rel="icon" type="image/svg+xml"> arkaly kabul edýär.
• Kesmek we çap etmek: lazer kesijiler, winil kesijiler we keşde maşynlary wektor ýollary bilen işleýär.

Güýçli we gowşak taraplary

Ýygy duş gelýän meseleler we olary çözmek

Saýt ýa-da programma SVG-ni kabul etmeýär

Iň aňsat çözgüt PNG göçürmesidir. Biziň SVG-den PNG-e öwrüjimiz çyzgyny brauzeriňizde siziň saýlan piksel giňligiňizde aýdyň PNG-e öwürýär. Faýlyňyz ýüklenmeýär we hiç haçan enjamyňyzdan çykmaýar.

Tekst başga şriftde görünýär

SVG adaty ýagdaýda şriftleri goşmaýar; görkezýän ulgamda şrift ýok bolsa, ätiýaçlyk şrift ulanylýar. Surat kontekstinde daşarky şriftler hem ýüklenmeýär. Dizaýn guralyňyzda teksti konturlara öwüriň ýa-da şrifti goşuň.

SVG sahypada nädogry ölçegde ýa-da kesilen

viewBox bolmasa ýa-da width/height berkidilen bolsa, masştablamak garaşylyşy ýaly işlemeýär. Kök svg elementine çyzgyny örtýän viewBox goşuň we ölçegi CSS-de kesgitläň.

Faýl garaşylandan uly

Dizaýn gurallary SVG-ä redaktor metamaglumatlaryny, artykmaç onluk belgilerini we gizlin gatlaklary ýazýar. SVGO ýaly optimizator olary aýyrýar. Serwerdäki Gzip ýa-da Brotli gysyşy tekst esasly SVG-ni has-da kiçeldýär.

PNG logotipim SVG görnüşinde gerek

Raster suraty hakykatda wektora "öwrüp" bolmaýar; gurallaryň edýän zady yzarlamakdyr (tracing): şekiller anyklanýar we konturlar hökmünde täzeden çyzylýar. Biziň PNG-den SVG-ä we JPG-den SVG-ä gurallarymyz 2-den 8-e çenli reňk bilen yzarlaýar. Netijeler ýönekeý logotipler we çyzgylar üçin gowy, fotosuratlar üçin bolsa gödek bolýar. Bu gurallarda faýl howpsuz birikme arkaly serwerlerimize ýüklenýär, şol ýerde yzarlanýar we iň gijä galanda 30 minut içinde pozulýar.

Öwürmek boýunça maslahatlar

• Maksat ölçegi biliň: SVG-ni PNG-e öwürende suratyň görkeziljek iň uly ölçegini saýlaň, ýokary dykyzlykly ekranlar üçin ony iki esse ediň. Guralymyzda iň uzyn tarap 4096 piksele çenli bolup bilýär; giňligi boş goýsaňyz, kiçi çyzgylar iň uzyn tarapy 1024 piksel bolar ýaly ulaldylýar.
• Fotosurat mazmuny üçin JPG: SVG-de fotosurat goşulan bolsa we aýdynlyk gerek bolmasa, JPG ýa-da WebP PNG-den kiçi; PNG-ni soňra surat öwrüjisinde öwrüp bilersiňiz.
• Faviconlar: logotipiňiz SVG bolsa, favicon döredijisi ony kabul edýär we bukja icon.svg goşýar.
• Yzarlamak üçin arassa çeşme: PNG-den SVG döredeniňizde ýokary çözgütli, tekiz reňkli, galmagalsyz suratdan başlaň.

Köp berilýän soraglar

SVG bilen PNG-niň arasynda nähili tapawut bar?

PNG berkidilen sanly pikseldir we ulaldylanda bulanyk bolýar. SVG şekilleri beýan edýär we islendik ölçegde ýiti täzeden çekilýär. SVG logotipler we nyşanlar üçin, PNG ýa-da JPG bolsa fotosuratlar we ekran suratlary üçin laýyk.

SVG faýlynda wirus bolup bilermi?

SVG ýerine ýetirilýän programma däl, ýöne oňa JavaScript goşup bolýar. SVG surat hökmünde (<img>) görkezilende skriptler işlemeýär, ýöne faýl brauzerde göni açylanda işläp biler. Näbelli çeşmelerden gelen SVG-ni göni açmagyň ýerine görkezijide gözden geçiriň ýa-da PNG-e öwüriň.

SVG-ni Word-a ýa-da PowerPoint-e goýup bolarmy?

Microsoft Office-iň häzirki wersiýalary SVG goýmagy goldaýar. Köne wersiýalar üçin ýa-da faýly başga programmalar bilen paýlaşjak bolsaňyz, PNG göçürmesi has ygtybarly.

SVG-ni PNG-e öwürmek hili peseldýärmi?

PNG ýitgisiz, ýöne çyzgy piksel ölçegine berkidilýär. Ýeterlik uly giňlik saýlasaňyz hiç hili ýitgini duýmarsyňyz; PNG-ni soňra ulaltmak ony bulanyk eder.

SVG animasiýany goldaýarmy?

Hawa. Hereket CSS animasiýalaryndan, SMIL animasiýa elementlerinden we JavaScript-den gelip biler. PNG-e öwürmek size ýeke kadr berýär.

Çeşmeler

• 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 çap ediliş taryhy
• MDN: SVG as an image
• MDN: Image file type and format guide