SVG’den PNG’ye dönüştürücü

SVG nedir ve piksellere dönüştürmek neden yalnızca tek yöne gider

Bir SVG resim değildir. Bir resmin betimlemesidir — her birinin koordinatları olan şekillerin, yolların, renklerin ve metinlerin bir listesi; başka bir şeyin okuyup çizdiği bir metin dosyasına yazılmıştır. Bir JPG ya da PNG ise bunun tersidir: dosya yazılırken bir kez belirlenmiş bir piksel ızgarası. Bu sayfadaki her şeyin arkasında yalnızca bu fark vardır; bu dönüştürücünün size sormak zorunda olduğu ve öbür iki dönüştürücünün hiç sormadığı tek soru da buna dahildir.

• Okuyabileceğiniz bir metindir. Bir SVG’yi herhangi bir metin düzenleyicide açın; şekiller önünüzde yazılıdır ve dosyanın hangi boyutu bildirdiğini, neye işaret ettiğini kendiniz de böyle görebilirsiniz.
• Hiçbir çözünürlüğü yoktur. Aynı dosya bir noktanın büyüklüğünde keskin bir simgedir ve duvarda keskin bir afiştir; çünkü çizim hiçbir yerde saklanmaz, onu gösteren şey tarafından her seferinde yeniden hesaplanır.
• İyi olduğu şey düz işlerdir — logolar, simgeler, şemalar, grafikler, haritalar; fotoğrafı çekilmiş değil çizilmiş her şey. Umutsuz olduğu şey ise fotoğraftır: betimlenecek şekli yoktur ve dosyada piksel başına bir satır isterdi.
• Onu piksellere dönüştürmek bu sayfanın yaptığı iştir ve sebebi neredeyse her zaman biçimi kabul etmeyen bir yerdir: bir yükleme formu, eski bir görüntü düzenleyici, bir belge ya da slayt şablonu, bir sosyal ağ önizlemesi, bir e-posta, bir baskı hizmeti.

Onu PNG’ye çevirmek çizimi seçilmiş tek bir boyutta piksellere sabitler ve bu, yalnızca tek yöne açılan bir kapıdır. Şekiller sonuçta saklanmaz ve buradaki hiçbir ayar onları korumaz; bu yüzden PNG’yi sonradan büyütmek yeniden bir şey çizmez, yalnızca piksellerini büyütür. Bu sayfa ayrıca hiçbir vektör biçimi yazmaz: bir resmi yeniden şekillere döndürmek bunun tersi değil, başka yanıtları olan başka bir sorundur. Bu yüzden SVG’yi saklayın. Buradan indirdiğiniz şey tek bir amaç ve tek bir boyut için yapılmış bir kopyadır; ikinci bir boyutu elde etmenin yolu, elinizdekini yeniden ölçeklemek değil özgün dosyayı yeniden dönüştürmektir.

Alanlardaki boyut nereden geldi

Bir vektörün kendine ait pikselleri olmadığı için, kaç pikselle çıkacağına bir şeyin karar vermesi gerekir; bu sayfa da işe dosyanın kendi ima ettiğini okuyarak başlar. O sayı genişlik ve yükseklik alanlarına girer ve yanlarındaki bir cümle dosyayı adıyla anıp sayının tam olarak üç yerden hangisinden alındığını söyler. Dönüştürmeden önce okumaya değer, çünkü bu üçü aynı ölçüde güvenilir değildir ve hangisini kastettiğinizi yalnızca siz bilirsiniz.

• Dosya kendi boyutunu piksel olarak bildiriyor. Üçünün en sağlamı budur: çizimi dışa aktaran kişi ne kadar büyük olması gerektiğini söylemiştir ve alanlar bunu yalnızca yineler.
• Dosya boyutunu fiziksel birimlerle veriyor — inç, santimetre, milimetre, punto ya da pika — ve bu, inç başına doksan altı piksel hesabıyla çevrilmiştir; söz konusu olan, ekranınızın bir ölçümü değil web’in inçten anladığı şeydir. Baskı için hazırlanmış bir çizim sık sık böyle gelir ve ondan çıkan piksel boyutu, hiçbir zaman pikselleri konu almamış bir sayının sadık bir çevirisidir.
• Dosya kullanılabilir hiçbir boyut bildirmiyor; bu yüzden boyut onun viewBox’ından ölçüldü. İki kez bakılacak durum budur: viewBox, şekillerin içinde çizildiği koordinat sistemidir, kimsenin seçtiği bir boyut değil; öyle ki koordinatları sıfırdan yirmi dörde giden bir simge, bir noktanın büyüklüğünde bir resim olmayı isteyerek gelir. Simge takımları ayrıca sık sık yüzdeyle verilmiş bir genişlik ve yükseklikle yazılır; bu, bu dosyanın sahip olmadığı bir şeyin boyutudur ve hiç boyut yokmuş gibi okunur, yani onlar da buraya düşer.

Üçünden hangisi yanıtlamış olursa olsun, sayı okunduğu anda bir kez tam piksele yuvarlanır; çünkü bir tuval tam piksellerle ayrılır ve kesirli bir parçayı koyacak yer yoktur. Bunun özellikle tek bir şey için önemi vardır: geri kalan her şey, arkasındaki kesirle değil gördüğünüz yuvarlanmış sayıyla çalışır; yani otuz bir piksel genişliğinde gösterilen bir çizimin iki katı, ikinci bir yuvarlamanın vereceği altmış üç değil altmış ikidir. Ekrandaki boyutla hesabın kullandığı boyut aynı boyuttur ve alanların söylediklerini gerçekten söylediği tek düzen budur.

İhtiyacınız olan boyutu seçmek — ve hiçbir boyut bildirmeyen çizim

Dosyanın ima ettiği boyut yalnızca bir başlangıç noktasıdır ve dayatılmak yerine öyle sunulur. İki alanla ilgili her şey, sıradan durumun hiç düşünmeyi gerektirmemesi ve kesin durumun yine de elde bulunması için düzenlenmiştir; bu sayfayla iki kardeşi arasındaki farkın tamamı da budur — bir fotoğraf zaten olduğu boyutta dönüştürülür ve karara bağlanacak bir şey yoktur.

• Bir genişlik yazarsınız, yükseklik onu izler; bir yükseklik yazarsınız, genişlik onu izler; böylece çizim, siz hiçbir hesap yapmadan oranlarını korur. Varsayılan olmasının sebebi, bir logoyu kazara bozmanın olanaksız kılınmaya değer hata olmasıdır.
• Gerçekten kesin bir kutuya ihtiyacınız olduğunda — bir afiş yuvası, sabit ölçülü bir profil görseli, bir simge sayfası — oranları koru seçeneğinin işaretini kaldırın; iki alan o zaman birbirinden bağımsız olur. Çizim bundan sonra istediğiniz şeyi doldurmak için gerilir; istediğiniz de budur ve bunun varsayılan değil bilinçli bir eylem olmasının sebebi de yine budur.
• Çarpan satırı, insanların gerçekten istediği boyutlara giden hızlı yoldur ve her biri, o anda alanlarda ne yazdığına göre değil dosyanın bildirdiği boyuta göre ölçülür. Böylece aynı çarpana iki kez basmak, istemediğiniz bir şeye doğru birikmek yerine size aynı yanıtı iki kez verir.
• Yanıtı olmayan bir çarpan, hiçbir şey yapmayan bir düğme olarak değil kullanılamaz olarak sunulur. Zaten çok büyük olan bir çizimi çarpmak, hiçbir görüntü biçiminin ifade edemeyeceği bir boyuta ulaşabilir ve sessizce direnen bir denetim, yapamadığını size gösterenden kötüdür.

Bir de hiçbir şey bildirmeyen dosya vardır: bu aracın okuyabileceği bir genişlik ve yükseklik yoktur, ölçülecek bir viewBox da yoktur. Kulağa geldiğinden daha yaygındır — kimi düzenleyicilerden doğrudan çıkan bir çizim ya da boyutunu CSS ile verecek bir sayfa için elle yazılmış bir çizim. İçinde gerçekten boyut yoktur; bu yüzden alanlar boş açılır, bir sayının nereden geldiğine dair cümle görünmez, çarpılacak bir şey ve korunacak bir oran olmaz ve satır, sizden bir genişlik ile bir yükseklik ister. Bu geri çevirme bir başarısızlık değil asıl meselenin kendisidir: böyle bir dosya verilen bir tarayıcı, kimsenin seçmediği küçük ve sabit bir kutuya düşer ve bir kez sorulması, onu indirip sonradan öğrenmekten iyidir.

Boyut olmayan bir çift kendi sözleriyle geri çevrilir; bu da aynı özenin öbür yarısıdır. Sıfır, negatif bir sayı, yarım piksel ya da hiçbir görüntü biçiminin ifade edemeyeceği kadar büyük bir sayı; her biri yuvarlanmak, kırpılmak ya da sessizce dosyanın kendi boyutuyla değiştirilmek yerine geri çevrilir — kimsenin istemediği bir boyutta dönüştürmek, bu sayfanın tam da yapmamak için var olduğu şeydir. Seçtiğiniz şey bir çizim değil de bir fotoğrafsa boyut alanları hiç görünmez: bir piksel görüntüsü kendi ölçüleriyle dönüştürülür ve hiçbir şeyi değiştiremeyecek bir denetim, hiç denetim olmamasından kötüdür.

Hangi biçime dönüştürmeli

Bu sayfa PNG ile açılır, çünkü neredeyse her vektör için doğru yanıt odur; öbür biçimler de başka bir sayfanın arkasında değil bir tıklama uzaktadır. Seçtiğiniz şey, pikselleri olduğu gibi saklayan bir biçimle onların bir kısmından daha küçük bir dosya karşılığında vazgeçen iki biçim arasındadır; bir çizim de alışılmadık ölçüde tek yanlı bir kanıttır: düz renk ve keskin kenarlar, kayıplı sıkıştırmanın en kötü başa çıktığı içeriğin ta kendisidir.

• PNG varsayılandır ve genellikle tartışmanın sonudur. Piksellere dönüştürülmüş çizimi olduğu gibi saklar, saydamlık taşır ve tek renkli düz alanları son derece iyi sıkıştırır — bir logo ya da simge çoğunlukla bundan ibarettir, bu yüzden dosya sık sık biçimin ününün düşündürdüğünden küçük çıkar.
• JPG yalnızca öbür uçtaki bir şey onda ısrar ettiğinde seçmeye değer. Saydamlığı hiç saklayamaz, yani çiziminizin arkasına önce bir arka plan rengi boyanmalıdır; sıkıştırması da tam olarak vektörü uğruna dönüştürdüğünüz keskin kenarlar ile harfler boyunca gri bir saçak bırakır.
• WebP bir web sayfası için orta yanıttır: saydamlık taşır ve genellikle PNG’den küçüktür. Burada, denetimin en üstü dahil her kalite ayarında kayıplıdır; yani bir sayfaya gidecek bir resim için iyi, yeniden düzenleyeceğiniz bir ana kopya için kötü bir seçimdir.
• Üçünün hiçbiri vektör değildir ve bu sayfa hiçbir vektör biçimi yazmaz. İhtiyacınız olan şey her boyuta uyan bir dosyaysa, o dosya zaten elinizdeki SVG’dir — onu saklayın ve buradan indirdiğinizi tek bir yer için yapılmış bir kopya sayın.

Kalite denetimi yalnızca vazgeçecek bir şeyi olan iki biçim için görünür; bunlar JPG ile WebP’dir. PNG hiçbir şey atmaz, yani orada durup hiçbir şey yapmayan bir denetim yerine hiç denetim sunulmaz. Her satır dosyanın çıktığı boyutu gösterir, böylece yaptığınız takas önünüzde duran bir sayı olur. O denetimi oynatmak, yapabildiği yerde çizimi yeniden çizmek yerine çoktan çizilmiş bir resmi yeniden kodlar; boyutu değiştirmekse yeniden çizmeyi gerektirir — sıralama da böyle doğrudur, çünkü gerçekten farklı pikseller üreten ikincisidir.

Piksellere dönüştürmenin yanında taşıyamadıkları

Buradaki her şey, tarayıcınızda zaten bulunan çizim düzeneğiyle yapılır: dosya ona bir resim olarak verilir, seçtiğiniz boyutta bir kez çizilir ve istediğiniz biçimde geri yazılır. Aracın hiçbir şey yüklenmeden, hiçbir şey kurulmadan ve sayfanın kendisi dışında hiçbir şey indirilmeden çalışmasını sağlayan budur — bir vektör içinse sonucun ne içerebileceğini de bu belirler; çünkü bir SVG piksel yığını değil bir belgedir ve bir belge bir şeyler isteyebilir.

Burada verildiği biçimiyle onları alamaz. Dosyanın içindeki hiçbir şey çalışmaz ve dosyanın dışındaki hiçbir şey getirilmez; bu, bilinçli ve gerçekten değerli bir özelliktir: bir SVG bir betik taşıyabilir ve çizim görüntülendiği anda istenecek bir adrese işaret taşıyabilir. Bir yabancının çizimini burada açmak bunların ikisini de yapmaz. Bu güvenliğin size neye mal olduğu aşağıda anlatılıyor ve ilk ikisi, sizin fark etmenize bırakılmak yerine satırda bildiriliyor.

• Dosyanın kendi dışında işaret ettiği her şey yüklenmeyecek — bağlantılı bir görsel, bir stil sayfası, bir yazı tipi. Bu, web’deki bir adres için de aynı klasörde duran bir dosya için de geçerlidir; ikincisi hayli daha yaygın olandır ve bildirimin onları uzak demek yerine yüklenmeyecek demesinin sebebi de odur. Ne için oldukları sonuçta eksik kalır ve çözüm, onları çizimin içine gömüp yeniden dönüştürmektir.
• Metin, bu makinede kurulu yazı tipleriyle çizilir. Harfler sonuçtadır ve size doğru görünür, ama aynı dosya başka bir bilgisayarda piksellere dönüştürüldüğünde başka bir yüz seçip başka bir resim verebilir. Harflerin tam biçimi önemliyse, dosyayı çizen programda metni yollara dönüştürün; o zaman aranan hiçbir şey kalmaz.
• Çizimin zaman içinde yaptığı hiçbir şey sonuçta yoktur. Çıktı, sunulan her biçimde hareketsiz bir resimdir; yani kendini hareketlendiren bir dosya yalnızca çizilen tek anı katar ve etkileşimli hiçbir şey de yolculuktan sağ çıkmaz.

Çıktıyla ilgili iki tavan, keşfedilmeye bırakılmak yerine açıkça söylenmeye değer. PNG’yi tarayıcının kendi sıkıştırıcısı yazar; o da her ihtimali denemeyen, fena olmayan bir sıkıştırıcıdır, yani özel bir iyileştirici tek bir pikseline dokunmadan dosyadan sonradan biraz daha kırpabilir. WebP ise her ayarda kayıplı bir kodlamadır, çünkü bir tarayıcıdan biçimin kayıpsız kipi hiç istenemez. İkisi de, sayfanın içinde çalışacak biçimde derlenmiş gerçek bir kodlayıcı gönderilerek kaldırılabilirdi ve bu araç bunu bilerek yapmıyor — söz konusu olan, içlerinden yalnızca bir kısmı biraz daha küçük bir dosya alsın diye her ziyaretçinin indireceği birkaç yüz kilobayttır; üstelik öbür bütün sayfaların çizildiği anda çalıştığı bir sitede. Özellikle bu sayfada göründüğünden azını da kazandırırdı: piksellere dönüştürme işi, vektörünüzün tarayıcı tarafından çizilmesidir ve bir kodlayıcı onun nasıl çizildiğini değiştiremez.

Her satır çiziminiz hakkında size ne anlatıyor ve ne zaman geri çeviriyor

Sessizce çalışan bir dönüştürücü, insanların siyah bir arka plan üzerindeki bir logoyu ya da işaret ettiği resmi eksik çıkmış bir çizimi günler sonra ve bambaşka bir yerde öğrenmesinin sebebidir. Buradaki her satır, o dosyaya gerçekte ne yapıldığının kısa bir dökümünü taşır — ve kayda değer bir şey olmadığında hiçbir şey taşımaz; bildirimleri uğruna durulacak şeyler kılan da budur. Bir vektör, bir fotoğrafınkinden başka bir bildirim takımıyla karşılaşır ve aracın üç bildirimi ona hiç uygulanamaz: bir çizimin atılacak kamera bilgisi, hangi yönde durduğunu söyleyen bir notu ve yitirilecek kareleri yoktur.

• Çizimin işaret ettiği bir şey yüklenmeyecek. Bu, ister bir adresle ister yanındaki bir yolla olsun, içinde bulunmayan bir görsele, stil sayfasına ya da yazı tipine başvuran bir dosya için görünür ve bir parçası eksik çıkan bir sonucun açıklamasıdır.
• Metin, bu makinedeki yazı tipleriyle çizildi. Bu yalnızca çizim tuvale gerçekten harf koyduğunda görünür; yani içinde boş bir metin öğesi olan bir dosya hiçbir şey söylemez ve hiç metni olmayan bir çizim de söylemez.
• Saydamlık düzleştirildi — ve hangi rengin üzerine. JPG’ye dönüştürmek çizimin arkasına bir şey koymak zorundadır ve listenizdeki bir dosyanın gerçekten ihtiyacı olur olmaz bir renk denetimi görünür. Bu bildirim varsayılan değil ölçülen bir şeydir: çizilen resimde gerçekten saydam bir piksel bulunana kadar bekler; yani kendi işi bütün resmi kaplayan bir çizim, JPG’ye bu konuda hiçbir şey söylenmeden dönüştürülür.
• Ad ile içerik uyuşmuyor. Biçim dosyanın adından değil içeriğinden belirlendiği için, birinin yanlış uzantıyla kaydettiği bir çizim, olduğu şey olarak, yani SVG olarak okunur ve doğru dönüştürülür — ve bu size söylenir, çünkü dosyanız hakkında büyük olasılıkla bilmediğiniz doğru bir şeydir.
• Bu ayarda WebP yine de kayıplıdır. Bir çizimi piksele çevirip ardından kalite denetiminin en tepesini istemek, tam olarak çizilenin geri geleceği duygusunu verir, oysa gelmez — uyarının düzelttiği inanç işte budur, bu yüzden orada görünür ve daha aşağıdaki hiçbir konumda görünmez.

Bir dosya hiç dönüştürülemediğinde araç, bir şey üretmek yerine sebebini söyler. Okuduğu biçimlerin hiçbiri olmayan bir dosya adıyla anılıp geri çevrilir; okunan biçimlerden biri olup başlangıcı okunamayan bir dosya da öyle — bir çizim için bu, açılış etiketi demektir, ki bir vektörün başlık niyetine sahip olduğu tek şey odur. İçinde bir yerde çizim bulunan bir web sayfası bir görüntü dosyası değildir ve öyle olarak geri çevrilir; dışarıdan ne kadar sağlam görünürse görünsün tarayıcınızın çizemediği ortaya çıkan bir çizim de aynı biçimde. Hiçbir şey tahmin edilmez ve yarım kalmış hiçbir şey bitmiş gibi geri verilmez.

Burada karşılaşmanız en olası geri çevirme boyutla ilgili olanıdır ve bu, dosyanızla değil bu sayfayla ilgili bir olgudur: bir çarpan bir tık ötededir, bir çizimden gönül rahatlığıyla herhangi bir boyut istenebilir ve bir vektörde sizi durduracak hiçbir şey yoktur. Sizi durduran, bir resmi ancak belli bir alana kadar tutan tarayıcıdır — telefonda başka bir alan, masaüstünde başka, aynı makinedeki iki tarayıcıda yine başka. Onu aşmak hiçbir hata vermez, yalnızca birkaç kilobaytlık boş bir görüntü verir; bu görüntü açılana kadar bitmiş bir dönüşüm gibi durur. Bu yüzden araç, tek bir biçim çizilmeden önce istediğiniz boyuttaki resme bilinen bir piksel yazar ve onu hemen geri okur; piksel geri gelmezse elinize boyutu içinde geçen geri çevirme geçer, dosya geçmez. Hiçbir yerde hiçbir şey sabit bir sayıyla karşılaştırılmaz; yani çarptığınız tavan kendi cihazınızınkidir, hiçbir zaman başkası için seçilmiş bir tavan değil.

Çiziminiz bu sekmeden neden hiç çıkmaz

Bir çizim, bir fotoğraftan daha çok şey ele verir; çünkü çizim bir metin dosyasıdır ve okunabilir. Katman adları, onu dışa aktaranın adı, birinin içine bıraktığı bir açıklama, işaret ettiği her parçanın adresi — bunların hepsi dosyanın içinde açık açık yazılıdır ve hiçbiri hiçbir yere gitmez. SVG dosyanızı bu tarayıcı sekmesi okur ve kendi makinenizin işlemcisi piksele çevirir. Bu sayfanın öbür ucunda böyle bir dosyayı kabul edebilecek bir sunucu yoktur; yani bu, aracın neyden yapıldığının bir betimlemesidir, nasıl işletildiğine dair bir söz değil.

Tarayıcınızın geliştirici araçlarındaki ağ panelinde birkaç saniye meseleyi kapatır ve bir çizim söz konusuyken bakılacak tek şey değil iki şey vardır. Dışarı dosyanızı taşıyan bir şey çıkmaz ve içinde ne kadar adres yazılı olursa olsun dosyanın adına da bir şey çıkmaz. Yüklendikten sonra sayfa, başka hiçbir yerde çalışan kodu olmayan bir avuç durağan dosyadır; ağ bağlantısını tümüyle kesip istediğiniz kadar piksele çevirmeyi sürdürebilirsiniz.

• Bir yabancıya göndermeyeceğiniz bir çizim — henüz duyurulmamış bir logo, bir kat planı, şirket içi bir şeyin şeması — burada makinenizden hiç çıkmadan piksellere dönüştürülebilir.
• Piksele çevirmeden çıkan şey, siz kaydedene kadar bu sekmede durur ve sekmeyi kapatmak onu silmenin tamamıdır. Ne getirdiğiniz çizim ne de ondan yapılan görüntü bir ziyaretten öbürüne hatırlanır.
• Tümüyle güvenmediğiniz bir yerden gelen bir çizimi burada açmak güvenlidir, çünkü içindeki hiçbir şey çalışmaz ve işaret ettiği hiçbir şey getirilmez. Onu piksellere dönüştürmek aynı zamanda onu arındırmanın bir yoludur: indirdiğiniz şey pikseldir ve pikseller hiçbir şey isteyemez.