svg-i png-ə çevirin. Şəkilləri rastrdan vektora çevirin CSS-də SVG-dən necə istifadə olunacağına dair qısa bələdçi
Bəzən brauzerdən istifadə edərək svg-ni png formatında saxlamaq lazım gəlir. Təəssüf ki, brauzerdə müxtəlif hacklər olmadan bunu etməyə imkan verən sehrli api yoxdur. Hələ də istədiyinizə nail olmaq istəyirsinizsə nə etməli?
Ağlıma gələn ilk fikir bunu toDataURL("image/png") olan kətan vasitəsilə etmək idi.
Beləliklə, mən sadə bir skript yazdım: jsfiddle, github:
Var html = document.querySelector("svg").parentNode.innerHTML; var imgsrc = "data:image/svg+xml;base64," + btoa(html); var canvas = document.querySelector("kətan"), kontekst = canvas.getContext("2d"); canvas.setAttribute("en", 526); canvas.setAttribute("hündürlük", 233); var image = yeni Şəkil; image.src = imgsrc; image.onload = funksiya () ( context.drawImage(şəkil, 0, 0); var canvasdata = canvas.toDataURL("image/png"); var a = document.createElement("a"); a.textContent = " saxla"; a.download = "export_" + Date.now() + ".png"; a.href = canvasdata; document.body.appendChild(a); canvas.parentNode.removeChild(kətan); );
Skriptin mahiyyəti sadədir: svg-ni dataUri-yə çevirdim, şəkil vasitəsilə yüklədim, kətan üzərinə şəkil çəkdim və png-yə çevirdim. Görünürdü ki, məqsədə çatdı və rahatlaşa bilərsiniz. Bu yanaşma Firefox və Chrome-da işlədi, lakin mən onu sevimli brauzerimiz olan IE-də açanda gözəl bir səhv aldım:
Məsələ ondadır ki, IE şəkilin başqa hostdan yükləndiyini hesab edir. Təəssüf ki, dataUri üçün mənşəyi təyin etmək işləməyəcək. Əslində qaydaların təsvirini burada tapa bilərsiniz: https://html.spec.whatwg.org/multipage/scripting.html#security-with-canvas-elements . Əlbəttə ki, server vasitəsilə svg-ni proksi etmək mümkün idi və sonra hər şey işləyəcəkdi, amma mən sırf müştəri tərəfi həll istədim.
Və sonra gözəl canvg kitabxanasını xatırladım. Bu kitabxananın köməyi ilə mən kətan üzərinə svg çəkirəm və sonra birinci variantda olduğu kimi edirəm: toDataURL("image/png") götürürəm. Belə sadə bir kod çıxdı: github:
var svg = document.querySelector("svg"); var canvas = document.createElement("kətan"); canvas.height = svg.getAttribute("hündürlük"); canvas.width = svg.getAttribute("en"); canvg(kətan, svg.parentNode.innerHTML.trim()); var dataURL = canvas.toDataURL("şəkil/png"); var data = atob(dataURL.substring("data:image/png;base64,".length)), asArray = new Uint8Array(data.length); üçün (var i = 0, len = data.length; i< len; ++i) { asArray[i] = data.charCodeAt(i); } var blob = new Blob(, {type: "image/png"}); saveAs(blob, "export_" + Date.now() + ".png");
Burada qeyd etmək lazımdır ki, mən də saxlama dialoq qutusuna zəng etmək üçün FileSaver kitabxanasından istifadə etdim.
Budur, istədiyimiz nəticəni əldə etdik.
Bir nüansı qeyd etmək yerinə düşərdi - tauCharts ixracı üçün plagin yazarkən svg-ni png-də saxlamaqla maraqlandım. Svg-dəki üslublar xarici fayldan qurulduğundan, orijinal svg ilə maksimum oxşarlığa nail olmaq üçün svg-ə daxili üslub əlavə edirəm. Və bu nəticəni əldə edirik.
Ümid edirəm ki, məqalə sizin üçün faydalı olacaq və vaxtınıza qənaət edəcək.
Deyəsən çox yaxşı işləmir. Çevirmək üçün -flatten bayrağını istifadə edən bir nümunə:
sudo apt-get install potrace imagemagick convert -input.png output.ppm potrace -s output.ppm -o output.svg rm output.ppm
Başqa bir maraqlı hadisə ondan ibarətdir ki, siz PPM (256 * 3 rəng, yəni RGB), PPM (256 rəng, yəni boz rəng) və ya PPM (yalnız 2 rəng, yəni yalnız ağ və ya qara) istifadə edə bilərsiniz. Məhdud müşahidələrimə görə, belə görünür ki, anti-aliased olan şəkillərdə PPM və PPM (mən görürəm ki, eyni SVG istehsal edir) rəng sahəsini kiçildir, PPM isə rəng sahəsini genişləndirir (az da olsa). Güman ki, bu, piksel > (256/2) testi ilə piksel > 0 testi arasındakı fərqdir. Fayl uzantısını, yəni aşağıdakı PPM istifadəsini dəyişdirməklə onlar arasında keçid edə bilərsiniz:
sudo apt-get install potrace imagemagick convert -düzləşdirin input.png output.pbm potrace -s output.pbm -o output.svg rm output.pbm
PNG şəklini SVG-yə necə çevirmək olar?
Bununla belə, bu ideal deyil.
Png bitmap üslubudur və SVG bitmapları dəstəkləyən vektor qrafik dizaynıdır ki, o, təsviri vektorlara çevirməyəcək, sadəcə vektor formatına daxil edilmiş təsvirdir. Bunu pulsuz olan http://www.inkscape.org/ istifadə edərək edə bilərsiniz. Onu inyeksiya edəcək, lakin istəsəniz onu yollara çevirməyə çalışacaq Live Trace mühərriki də var (potrace istifadə edərək). Adobe illustrator-da (kommersiya) irəli izləmə nümunəsidir:
Bir növ Linux sistemindəsinizsə, imagemagick mükəmməldir. Bunlar.
Somefile.png somefile.svg-ə çevirin
Bu, müxtəlif formatların bir dəstəsi ilə işləyir.
Bununla belə, video və audio (ffmpeg) kimi digər media üçün, Mən bilirəm ki, siz açıq şəkildə png-dən svg qeyd etmisiniz; Hələ də mediaya bağlıdır.
ffmpeg -i somefile.mp3 somefile.ogg
Bir çox fayldan keçmək istəyirsinizsə, sadəcə bildirin; əsas qabıq hiylələrindən istifadə edərək döngə.
f üçün *.jpg; $f $(f%jpg)png çevirmək; edildi
Bu, jpg-ni silir və istədiyinizi çevirməyinizi bildirən png əlavə edir.
Şəkilinizi yükləyib nəticəni görə biləcəyiniz bir sayt var.
Ancaq svg şəklini yükləmək istəyirsinizsə, qeydiyyatdan keçməlisiniz. (Qeydiyyatdan keçsəniz, pulsuz olaraq 2 şəkil əldə edəcəksiniz)
adobe illustrator ilə:
Adobe Illustrator proqramını açın. .PNG faylını proqrama yükləmək üçün "Fayl" düyməsini basın və "Açıq" seçin. Şəkli .SVG faylı kimi saxlamazdan əvvəl lazım olduğu kimi çıxarın. "Fayl" düyməsini basın və "Fərqli Saxla" seçin. Yeni bir fayl adı yaradın və ya mövcud fayl adından istifadə edin. Seçilmiş fayl növünün SVG olduğundan əmin olun. Kataloq seçin və faylı saxlamaq üçün Saxla düyməsini basın.
Mən süni intellektə üstünlük verirəm, çünki siz istənilən dəyişiklik edə bilərsiniz
Güman edirəm ki, bunun üçün proqram yazmaq istəyirsən. Bunu sadəlövhlüklə etmək üçün sadəcə xətləri tapıb vektorları təyin edin. Bunu ağıllı şəkildə etmək üçün siz formaları rəsmə uyğunlaşdırmağa çalışırsınız (model uyğunluğu). Həmçinin, rastr sahələri (utanclarla modelləşdirə bilməyəcəyiniz və ya tekstura tətbiq edə bilməyəcəyiniz bölgələr) müəyyən etməyə çalışmalısınız. Mən bu marşrutla getməyi məsləhət görməzdim, çünki bu, kifayət qədər vaxt aparacaq və qrafika və kompüter görmə sahəsində müəyyən bilik tələb edəcəkdir. nəticə əhəmiyyətli dərəcədə olacaq və orijinal nəticənizdən daha yaxşı olacaq.
Layihələrdən birində menyunun yanında svg formatında kiçik nişanlar göstərilirdi və siçanı menyunun üzərinə gətirəndə mətn və işarənin rəngini dəyişməsi lazımdır. Çox sayda şəkil yaratmamaq üçün svg kodunu koda çevirmək və CSS üslublarında istifadə etmək qərara alındı.
CSS-də SVG-dən necə istifadə olunacağına dair qısa bələdçi
Nəticə kodunu css faylımızda istifadə edirik.
Məsələn, Facebook ikonasını götürün (az dəyişikliklə standart ikona).
Https://jakearchibald.github.io/svgomg/ saytında klikləyin SVG açın və ya sadəcə nişanı görüntü pəncərəsinə sürükləyin. Yuxarı sol küncdə klikləyin KOD, kodu vurğulayın və üzərinə klikləyin surəti simvolu, beləliklə, svg-şəkilimizin kodunu buferə alırıq.
Bu kimi bir şey:
Sonra ortaya çıxan kodu yuxarıdakı pəncərəyə yapışdırın, Dönüştür düyməsini basın və işi bitirin fon şəkli:
Arxa fon şəkli: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"%3e%3cpath fill-rule="evenodd" clip-rule="evenodd" fill="%23FFF" d="M12.748 16v-1h6v1h-6zm0-3h6v1h-6v-1zm4 5h -4v-1h4v1zM13.748 9.975v-3h-4v-1c0-1.104.896-2 2-2h2v-2.95h-2c-2.8.256-5 2.583-5 5.45 0.017.0050.50.52.005.05. 3v3h3v8h3v-8h4z"/%3e%3c/svg%3e");
Kopyalayın və css-də istifadə edin.
Rəngi dəyişmək üçün fill="%23FFF" dəyişdiririk, lakin unutmayın ki, %23 adi # işarəsidir, yəni fill="%23000" adi qaradır (#000).
kimi raster şəkillərdən çevirdiyiniz zaman PNG-dən SVG-yə və ya JPG-dən SVG-yə, o, qara-ağ şəkillərdəki formalarınızı və obyektlərinizi keyfiyyətini itirmədən böyüdülə bilən vektor qrafikasına çevirəcək. Sonra onları Inkscape kimi istənilən vektor qrafik redaktorunda rəngləyə bilərsiniz.
Adi şəkillərin çevrilməsi, çox güman ki, istənilən nəticəni verməyəcək.
SVG-yə çevirməkdə ən yaxşı nəticələr əldə etmək üçün möhkəm fonu olan təsvirdən istifadə edin.
- SVG-yə çevirmək üçün faylı seçin, onun serverimizə yüklənməsini gözləyin.
- Demək olar ki, bütün şəkil formatlarını (PNG, JPG, BMP və s.) dəstəkləyir. Fayl ölçüsü məhdud deyil, lakin fayl nə qədər böyükdürsə, onu çevirmək bir o qədər çox vaxt aparacaq.
- Dönüşümdən sonra orijinal faylınızı və onun altındakı nəticəni görəcəksiniz.
- Nəticəni link vasitəsilə yükləyin.
Niyə SVG formatına ehtiyacınız var və ondan necə istifadə etmək olar? PNG-ni SVG-yə və ya JPG-ni SVG-yə çevirdikdən sonra
SVG (Scalable Vector Graphics) XML əsaslı vektor qrafikası formatıdır
Üstünlüyü ondan ibarətdir ki, keyfiyyət və detalları itirmədən şəklin ölçüsünü dəyişə bilərsiniz. Ölçüsü artırdığınız zaman vektor təsviri əyrilərin formasını qoruyur, beləliklə, şəkil istənilən qətnamədə göstərilə bilər.
