Sketch-dan SVG-ni eksport qilishning eng yaxshi usuli

Nusxalash SVG kodini ishlatishdan oldin nimani bilishingiz kerak.

Sketch-dan SVG-faylni eksport qilish juda oson, ammo sizning ehtiyojlaringizga mos ravishda samarali va ishonchli SVG-ni yaratish jarayoni juda katta mavzu. Bu juda murakkab mavzudir, men bu haqda to'liq kurs qildim, uni 8 oylik rivojlanishdan keyin bugun nashr etaman! Ammo bu maqola savdo maydoni emas; bu dizaynerlarning umumiy savollariga texnik qo'llanma.

SVG-larni Sketch-dan eksport qilishda keng tarqalgan savol: "Eksport qilish uchun qaysi funktsiyadan foydalanishim kerak? SVG kod nusxa olinsinmi? Eksport tugmachasi? Boshqa bir narsa?"

Men ushbu xususiyatlarning har birini chuqur o'rganib chiqdim va ushbu maqolada o'zimning fikrlarim va tavsiyalarimni to'pladim.

Bitmap formatlari haqida gap ketganda, sizning qatlamlaringizni tilim yoki Artboard-da bo'lishingiz muhim emas; qulaylik uchun dizaynni Layers ro'yxatidan olib tashladingizmi yoki inspektorda Eksport tugmasidan foydalandingizmi. Sizning yakuniy grafikangiz bir xil bo'ladi.

Ammo SVGlar boshqacha. Ular sizning qatlamlaringiz haqida tonna ma'lumotni o'z ichiga olgan dizayningizning tavsifidir. SVG-ni Sketch-dan qanday chiqarishingizga qarab, ushbu tavsiflarni o'zgartirishning nozik usullari mavjud. Grafikangiz bir xil bo'ladi, lekin ostidagi kod har xil bo'ladi.

Asosiy parametrlarga quyidagilar kiradi:

Qaysi xususiyat eksport qiladi
Siz Inspektorda Eksport tugmachasidan foydalanyapsizmi, SVG kodini nusxalash funktsiyasidan foydalanasizmi yoki Layers ro'yxatidan yoki Inspektorning eksportini oldindan ko'rib chiqmoqchimisiz?

Siz nima eksport qilasiz
Siz Artboard, qatlam yoki tilim eksport qilyapsizmi? Agar siz faqat tanlangan qatlamlarni yoki bo'laklarni eksport qilsangiz, ular Artboard ichida joylashgan yoki Tuvalda suzayotganmi?

Boshqa jarayonlar
Faylni optimallashtirish uchun Sketch-ning SVGO Compressor plaginiga ishonasizmi?

Birlashtirilganda, ushbu o'zgaruvchilar sizning dizayningizdan SVG-ni eksport qilishning kamida o'nlab usullariga imkon beradi. Shunday qilib, eng yaxshisi?

Take-Aways va tavsiyalar

Agar siz shaffof texnik tafsilotlar bilan qiziqmasangiz, SVG-ni eksport qilish bo'yicha maslahatlarim quyidagicha:

  • San'at taxtalari kalitdir. Har doim qatlamlaringiz atrofida Artboard-ga ega bo'ling va Artboard-ni uning ichidagi qatlamlar yoki chiziqlar o'rniga eksport qiling.
  • Tekshirish menyusidagi Eksport tugmachasidan yoki SVG kodini nusxalash funktsiyasidan foydalanishingiz mumkin, ammo ularni Artboard-da ishlating.
  • Nusxalash SVG kodini SVG-da xohlashingiz mumkin bo'lgan bir nechta kichik narsalar, masalan, sarlavha elementi (kirishni yaxshilash uchun) yoki XML deklaratsiyasi (mustaqil grafikalar sifatida ishlatiladigan SVG-lar uchun tavsiya etilgan) kabi narsalarni o'z ichiga olmaydi.
  • Agar siz Sketch-ning SVGO Compressor plaginidan foydalanishni xohlasangiz, shunchaki SVG kodini nusxalash emas, balki Eksport tugmachasi bilan ishlashini unutmang.
  • Samaradorlikni oshirish uchun klaviatura yorliqlarining quyida joylashgan joyini ko'rib chiqing!

Ushbu xulosalarga qanday kelganimni va har bir eksport usuli o'rtasida aniq farqlar mavjudligini tushunish uchun qatlamlarning SVG-ga qanday joylashishini tushunishimiz kerak.

"Men o'sha erdanman, lekin bu erga ko'chib o'tdim"

Har bir SVG-da elementlar joylashtirilgan panjara yoki "koordinatalar tizimi" mavjud. Bu SVGlarning ishlashi uchun juda muhimdir.

SVG-larda shuningdek ViewBox deb nomlangan narsa bor va u Sketch-dagi Artboard-ga o'xshaydi. ViewBox dasturi SVG tarmog'ining qaysi qismi sizning so'nggi grafikangizda paydo bo'lishini belgilaydi - ichkarida hamma narsa ko'rinadigan va tashqaridagi narsalar kesilib ketadi.

Umumjahon amaliyoti sifatida viewBox ko'pincha tarmoqning kelib chiqish joyida joylashgan. Boshqacha qilib aytganda, viewBox-ning yuqori chap burchagi 0,0 ga teng (x va y o'qlarida nol). Uni panjara tarmog'ining istalgan joyiga qo'yish mumkin edi, ammo ko'pgina stsenariylar ushbu anjumanda qatnashishdan foyda ko'rishadi.

Sketch-dan grafikani (har qanday formatda) eksport qilganda, foydalanuvchi, sizning grafikangizning o'lchamlarini aniqlashga imkon beradigan ba'zi yondashuvlar mavjud va boshqalar, Sketch siz uchun o'lchamlarni aniqlaydi. Misol uchun, agar siz Artboard yoki tilimlarni eksport qilsangiz, siz nazoratda bo'lasiz. Agar siz biron bir qavatni tanlasangiz va "Eksport qilinadigan qilish" tugmachasini bossangiz, Sketch boshqaruvida va u siz tanlagan qatlamning hajmiga (shuningdek uning soyalari va chegaralariga) mos keladigan grafikani yaratadi.

Agar biz faqat qizil to'rtburchaklar qatlamini SVG sifatida eksport qilsak, to'rtburchaklar atrofida bo'sh joy qolmaydi - viewBox to'rtburchaklar bilan bir xil bo'ladi. Shunday qilib, Sketch yangi SVG tarmog'iga viewBox va to'rtburchaklar 0,0 ga joylashishini kutishingiz mumkin.

Ushbu yondoshuvning salbiy tomoni shundaki, siz to'rtburchak o'zining Artboard-ga qayerda joylashgani haqida ma'lumotni yo'qotasiz. Yaxshiyamki, Sketch sizning SVG elementlaringizning pozitsiyalari, aksariyat hollarda Artboard ichidagi qavatlaringiz bilan bir xil bo'lishi kerakligiga rozi.

Shunday qilib, faqat qizil to'rtburchakni eksport qilganda, Sketch to'rtburchaklar o'lchamlari bilan viewBox-ni yaratadi, ammo viewBox-ni 0,0 ga teng holatda ushlab turadi. Sketch shuningdek, Artboard-dagi to'rtburchakning asl holatini hurmat qiladi va asosiy pozitsion xususiyatlarini o'zgartirmasdan to'rtburchakni 0,0 ga ko'tarishda hiyla ishlatadi.

Bu hiyla-nayrang tarjima deb nomlanadi. Ko'lamli va aylanadigan kabi ko'plab turdagi transformatsiyalar mavjud, ammo tarjima qilish eng asosiy hisoblanadi: u oddiygina elementni harakatga keltiradi. Yup - "tarjima qilish" bu "ko'chirish" degan xayoliy so'z.

Elementni bir joyda yaratish uchun keraksiz bo'lib tuyulishi mumkin, so'ngra darhol boshqa joyga ko'chiring. Ammo bu 2 bosqichli jarayon to'rtburchakning asl holati to'g'risidagi ma'lumotni saqlab qolish uchun, shuningdek SVG tarmog'iga 0,0 ga joylashtirilgan viewBox konvensiyasiga rioya qilish uchun kerak. Bular bema'ni sabablar kabi ko'rinishi mumkin, ammo ular aslida SVG kodi bilan ishlaganda muhim bo'lishi mumkin. Mana, haqiqiy dunyo stsenariysi:

Qachon tarjima qilish foydali bo'ladi

Mening tajribamda, SVG elementlarini joylashtirish uchun zarur bo'lgan bitta ssenariy mavjud, u erda mos keladigan eskiz qatlamlari mavjud edi: mavjud SVG grafikasiga o'zgartirganingizda yoki qo'shayotganingizda.

Tasavvur qiling-a, siz har doimgidan ham mashhur "Monsieur Whale" ikonkasini SVG sifatida eksport qildingiz va uni optimallashtirish, chayqash, balki uni jonlantirish yoki sprey-jadvalga joylashtirish uchun vaqt sarfladingiz. Ammo keyin siz ba'zi o'zgarishlar qilasiz ....

Og'iz bo'shlig'ini o'zgartirgandan va buzadigan amallar qatorini qo'shgandan so'ng, siz ushbu o'zgarishlarni ehtiyotkorlik bilan ishlab chiqilgan SVG-ga kiritishni xohlaysiz. Agar siz SVG kodini nusxalashni yangi qatlamlarda eksport qilsangiz yoki ishlatsangiz, Sketch SVG ni yaratadi, u ham grafik sifatida haqiqiy, ham tanlangan qismini asl SVG-ga qo'shish uchun foydalanish mumkin. Ikkinchisini bajarish oson, chunki transformatsiya guruhiga qo'llaniladi; sizning dizayn elementlaringiz asl holatiga ega va nusxa olishga tayyor.

Yangi SVG kodini soddalashtirish:

  
    
    
    
    ...
  
(Qalin = O'zgartirishlarni asl nusxaga ko'chiring)
Yangi vektor yo'llarining barchasi asl nusxa bilan bir xil SVG tarmog'iga joylashtirilgan, shuning uchun ularni osongina osib qo'yish mumkin. SVG-da, hatto sketchdan ketganidan keyin ham takrorlash deyarli qiyin bo'ladi.

Sizga o'zingiz yaratgan grafikangizni o'zgartirganda faqat ushbu har bir qatlamli ish oqimidan foydalanishni taklif qilaman. Yuqoridagi Take-Aways bo'limida aytib o'tilganidek, yangi SVG-larni Artboard-ni eksport qilish bilan boshlash yaxshidir, ya'ni tarjima qilingan o'zgarishlar sizning so'nggi SVG-ni buzmaydi.

Optimallashtirish haqida eslatma

Agar tanlangan qatlamlar uchun SVG kodini nusxalash va mavjud SVG tarkibiga kirsangiz (yuqorida aytilganidek), ushbu nusxalangan kodni SVGOMG singari optimizator orqali qo'yishda ehtiyot bo'ling.

Men SVGOMG-ning katta muxlisiman va men uning barcha variantlarini o'z ichiga olaman, lekin ba'zi bir optimallashtirish o'zgartiradigan transformatsiyani o'zgartiradi - elementni mavjud SVG-ga qayta qo'shganingizda nusxalanmasligi kerak. . Tarkibni guruhlardan elementlarga o'tkazish kabi optimallashtirish foydasiz guruhlarni ko'chirmoqchi bo'lgan elementga o'tkazishi mumkin (uni konteynerlar guruhida qoldirmasdan). Bunday holda, uni o'chirish juda oson. Ammo Dumaloq / Rewrite Paths optimallashtirish elementni vektor nuqtalariga aylantirishi mumkin - bu uni doimiy ravishda samarali qiladi.

Nusxalangan SVG kodingizni SVGOMG orqali boshqarish yomon emas - shunchaki tarjima qilingan transformatsiyani topa olganingizga ishonch hosil qiling. Agar siz elementlariga aylanadigan qatlamlardan nusxa ko'chirayotgan bo'lsangiz, unda Artboard-dan nusxa ko'chirish yaxshiroqdir, shunda hech qanday tarjima transformatsiyasi bo'lmaydi.

Klaviatura yorliqlari bo'yicha maslahat

Agar siz SVG kodini nusxalashdan foydalanishni va uni sevishni boshlasangiz, ishingizni yanada samaraliroq qilish uchun sizga ko'rsatma.

Dahshatli Sketch Buyruqlari plaginini o'rnating; u siz bilan ishlayotgan qatlamning Artboard-ni tanlash funktsiyasini qo'shadi. Keyinchalik o'sha Artboard taxtasi buyrug'i va SVG kodini nusxalash uchun tizim imtiyozlarida maxsus yorliqlarni yarating. Siz tanlagan tugmachalarni tanlash shaxsiy afzal masala. Men ularni shift A (o'zgartirish uchun Sketch's Select All Artboards funktsiyasini almashtirdim) va mos ravishda ⌘ S ni boshqarish variantini ko'rib chiqdim.

Ushbu yangi yorliqlar bitta tugmachada Artboard-ni tanlab, uning SVG kodini boshqasiga nusxalashga imkon beradi!

Har bir usul qanday ishlaydi

Agar siz Sketch-ning eksport xususiyatlari va yuqorida aytib o'tilgan barcha parametrlar o'rtasidagi aniq farqlarni bilishni istasangiz, men sinovlarim natijalarini bu erda taqdim etdim:

Sketch-ning SVG eksporti o'tgan yili sezilarli darajada yaxshilandi, va hatto so'nggi yangiliklarda. Ammo ba'zi bir eng yaxshi amaliyotlar haqiqat bo'lib qoladi: har doim qatlamlar atrofida Artboard-dan foydalaning va shaxsiy qatlamlar yoki bo'laklarga emas, balki Artboard-ga eksport qiling yoki nusxa ko'chiring. SVG kodini nusxalash funktsiyasi endi Eksport tugmasidan kam emas; agar siz uni qachon va qanday ishlatishni bilsangiz, bu sizning dizayn ishingizning samaradorligini sezilarli darajada oshirishi mumkin.

Ushbu maqola mening Sketch-dagi SVG Workflows yangi kursimdan ilhomlangan. Men SVG-ni o'rganayotganda shu kabi resurslarga ega bo'lishni xohlardim, shuning uchun etishmayotgan qismlarni boshqa dizaynerlarga taqdim etishga qaror qildim. Kurs Sketchda bilganingiz va SVG bilan yaratadigan hayratlanarli narsalar orasidagi bo'shliqni bartaraf etishga qaratilgan.

Shuningdek, men yangi dizaynga bag'ishlangan maqolalar va manbalarni nashr etganimda birinchi bo'lib mening yangiliklar byulletenimga ro'yxatdan o'tishingiz mumkin.