SVG-დან PNG-ში კონვერტერი

აქციეთ მასშტაბირებადი SVG ვექტორები მზა PNG სურათებად

SVG ფაილი ინსტრუქციების ნაკრებია და არა მზა სურათი. გახსენით ერთი ტექსტურ რედაქტორში და იპოვით XML-ს, რომელიც აღწერს ბილიკებს, ფორმებს, შევსებებსა და მრუდებს — რეცეპტს, რომელსაც ბრაუზერი მისდევს გრაფიკის ხელახლა დასახატად ნებისმიერ თქვენს მიერ მოთხოვნილ ზომაზე. PNG საწინააღმდეგოა: ფერადი პიქსელების ბადე, ფიქსირებული სიგანე-სიმაღლით გაყინული. ერთის მეორეში გადაქცევას რასტერიზაცია ჰქვია, და ეს ხელსაწყო მას მთლიანად თქვენს ბრაუზერში აკეთებს. ირჩევთ გამოტანის ზომას, SVG ილაქება HTML canvas-ზე, და უკან PNG გელოდებათ — ფაილი არასდროს ტოვებს თქვენს მოწყობილობას.

ვექტორი და რასტერი - მარტივი ენით

ძირითადი განსხვავება გარჩევადობასთან დამოკიდებულებაშია. რადგან SVG მათემატიკას ინახავს პიქსელების ნაცვლად, ის გარჩევადობისგან დამოუკიდებელია: მასშტაბირეთ ლოგო ფავიკონიდან ბილბორდამდე და ყოველი კუთხე ხელახლა გამოითვლება, რომ მათემატიკურად მკვეთრი დარჩეს. PNG ასეთ თავისუფლებას მოკლებულია. მისი პიქსელები ჩამომზადებულია, ამიტომ ნატურალურ ზომაზე ზემოთ გადიდება მაყურებელს აიძულებს არსებული წერტილების გაწელვას, და მაშინ ჩნდება ბუნდოვანება და საფეხურის ეფექტი, რაც რასტერულ სურათებს ამხელს.

ეს კომპრომისი ორივე მხრიდან მოქმედებს. ვექტორები დაუმარცხებელია ლოგოებისთვის, აიკონებისა და სუფთა ფორმებისგან შემდგარი ბრტყელი ილუსტრაციებისთვის, ფაილები კი ჩვეულებრივ ძალიან პატარაა. რასტერული ფორმატები, როგორიცაა PNG, გრადაციებს, რბილ ჩრდილებსა და ფოტოგრაფიულ დეტალებს უფრო ბუნებრივად ართმევს თავს, და — რაც მთავარია — მას ფაქტობრივად ყველაფერი ცნობს. რასტერიზაციისას თქვენ SVG-ის უსასრულო მასშტაბირებადობას PNG-ის უნივერსალურ თავსებადობაზე ცვლით ერთ არჩეულ ზომაზე.

რატომ ღირს საერთოდ SVG-ის რასტერიზაცია

თუ SVG ასე ლამაზად მასშტაბირდება, რატომ გადავიყვანოთ? თავსებადობა ჩვეულებრივი პასუხია. ბევრი ადგილი უბრალოდ არ იღებს SVG-ს: ბევრი ელფოსტის კლიენტი შორდება მას ან უარს ამბობს გამოსახვაზე, დოკუმენტების რედაქტორები და პრეზენტაციის პროგრამები ხშირად ბრტყელ სურათს ითხოვს, სავაჭრო პლატფორმები და სარეკლამო ქსელები PNG-ს ან JPG-ს მოითხოვს, ხოლო სოციალური ქსელების უმეტესობა ვექტორულ ატვირთვას საერთოდ იგნორირებს. ზოგიერთი კონტენტის სისტემა SVG-ს უსაფრთხოების მოსაზრებით პირდაპირ ბლოკავს, რადგან ფორმატს სკრიპტების ჩართვა შეუძლია.

მეორე მიზეზი ისაა, რომ ზოგჯერ ფიქსირებული ზომის ატრიბუტი გინდათ. აპლიკაციის აიკონები, მინიატურები, Open Graph გადახედვის სურათები და ბეჭდვითი მასალები ყველა ზუსტ პიქსელურ განზომილებებს ელოდება. PNG გრაფიკას ამ სამიზნეზე ამაგრებს, ასე რომ ის ყველგან იდენტურად გამოისახება, გამომსახველის ვექტორის სხვანაირად ინტერპრეტაციისგან გამოწვეული სიურპრიზების გარეშე. თქვენი წყარო SVG-ის კონკრეტულ ზომებში გადაქცევა, რომელსაც პლატფორმა ითხოვს, ხშირად ყველაზე სუფთა გზაა თანმიმდევრული შედეგისკენ.

სწორი გამოტანის გარჩევადობის არჩევა

რადგან PNG ვერ დიდდება ელეგანტურად, ის ზომა, რომელზეც გამოიტანთ, უფრო მეტ მნიშვნელობას იძენს, ვიდრე ნებისმიერი ვექტორისას. ძალიან პატარაზე გამოტანისას სურათი თანამედროვე ეკრანებზე რბილად გამოიყურება; საჭიროებაზე მეტად დიდზე გამოტანისას კი გამტარუნარიანობას ხარჯავთ. მარტივი წესია: გადაწყვიტეთ ყველაზე დიდი ზომა, რომელზეც სურათი ოდესმე გამოჩნდება, შემდეგ გამოიტანეთ სულ მცირე ეს, და სასურველია მეტიც მაღალი სიმკვრივის ეკრანებისთვის.

სტანდარტული ეკრანებისთვის 1x-იც საკმარისია — ეს გრაფიკის ნომინალური ზომაა. მაღალი DPI-ისა და Retina ეკრანები ერთსა და იმავე სივრცეში დაახლოებით ორჯერ მეტ პიქსელს ინახავს, ამიტომ 2x გამოტანა აიკონებსა და გრაფიკას მკვეთრს ინარჩუნებს ბუნდოვანების ნაცვლად. ბეჭდვის, პლაკატებისა და ძალიან დიდი ეკრანებისთვის 3x ან 4x მოქმედების არეალს გაძლევთ. რადგან წყარო ვექტორია, უფრო დიდზე გამოტანა ხარისხში არაფერს გიჯდებათ — მრუდები უბრალოდ ხელახლა გამოითვლება უფრო მაღალ პიქსელურ რაოდენობაზე, სანამ ისინი გაბრტყელდება. ეჭვის შემთხვევაში გამოიტანეთ გულუხვი ზომა; დიდი PNG-ის შემცირება ყოველთვის შეგიძლიათ, მაგრამ პატარას გადიდებით დეტალის დაბრუნება არასდროს შეგეძლებათ.

გამჭვირვალობა კონვერტაციასაც გამოჰყვება

PNG-ს სრული ალფა-არხი აქვს, რაც ნიშნავს, რომ გამჭვირვალობა კონვერტაციას გადაურჩება. თუ თქვენს SVG-ს ფონის შევსება არ აქვს, საბოლოო PNG ამ ადგილებს გამჭვირვალედ ინახავს, ასე რომ ლოგო ან აიკონი ნებისმიერ ფერზე სუფთად ეცხება უშნო თეთრი ჩარჩოს გარეშე. თუ მაგივრად მყარი ფონი გჭირდებათ, კონვერტაციამდე მიანიჭეთ SVG-ს ერთი. ორივე შემთხვევაში, რასაც ვექტორში ხედავთ, სწორედ ის შენარჩუნდება PNG-ში, რაც ზუსტად ისაა, რის გამოც PNG — და არა JPG — ბუნებრივი სამიზნეა აიკონების, ნიშნებისა და გადაფარვების.

ყველაფერი თქვენს მოწყობილობაზე რჩება

ეს კონვერტერი ლოკალურ კოდად მუშაობს თქვენს ბრაუზერში canvas API-ის გამოყენებით. თქვენი SVG იკითხება, ილაქება და გამოიტანება სერვერზე გაგზავნის გარეშე, ასე რომ არც ატვირთვაა, არც რიგი, არც თქვენი გრაფიკის კოპია სხვისი საცავში. ეს უფრო სწრაფია და უფრო უსაფრთხოც ყველაფრისთვის, რასაც სხვას არ ჩააბარებდით, გამოუქვეყნებელი ბრენდინგიდან შიდა დიაგრამებამდე. როცა აქ დაასრულებთ, დაათვალიერეთ ჩვენი დანარჩენი სურათის ხელსაწყოები — თუ Windows-ის ან ფავიკონის აქტივს აშენებთ, PNG-დან ICO-ში კონვერტერი ბუნებრივი შემდეგი ნაბიჯია.

ხშირად დასმული კითხვები