Scalable Vector Graphics, ან SVG, დღეს მნიშვნელოვან როლს თამაშობს ვებსაიტის დიზაინში. თუ ამჟამად არ იყენებთ SVG-ს თქვენი ვებ დიზაინის მუშაობაში, აქ არის რამდენიმე მიზეზი, რის გამოც უნდა დაიწყოთ ამის გაკეთება, ისევე როგორც სარეზერვო საშუალებები, რომლებიც შეგიძლიათ გამოიყენოთ ძველი ბრაუზერებისთვის, რომლებიც არ უჭერენ მხარს ამ ფაილებს.
რეზოლუცია
SVG-ის ყველაზე დიდი სარგებელი არის გარჩევადობის დამოუკიდებლობა. იმის გამო, რომ SVG ფაილები არის ვექტორული გრაფიკა (პიქსელზე დაფუძნებული რასტრული სურათებისგან განსხვავებით), შეგიძლიათ მათი ზომის შეცვლა სურათის ხარისხის დაკარგვის გარეშე. ეს განსაკუთრებით სასარგებლოა, როდესაც ქმნით საპასუხო ვებსაიტებს, რომლებიც კარგად უნდა გამოიყურებოდეს და კარგად მუშაობდეს ეკრანის ზომისა და მოწყობილობების ფართო სპექტრში.თქვენ შეგიძლიათ გააფართოვოთ SVG ფაილები ზევით ან ქვევით, რათა დააკმაყოფილოთ თქვენი საპასუხო ვებსაიტის ცვალებად ზომა და განლაგება, მათი ხარისხის რაიმე სახის კომპრომისის გარეშე.
ზოგადად, SVG-ებს აქვთ უფრო გლუვი, მკაფიო გარეგნობა, ვიდრე სხვა ფორმატის სურათებს, განურჩევლად ზომისა.
ფაილის ზომა
ერთ-ერთი გამოწვევა რასტრული სურათების (მაგ., JPG, PNG, GIF) გამოყენებასთან საპასუხო ვებსაიტებზე არის ფაილის ზომა. იმის გამო, რომ რასტრული გამოსახულებები არ არის მასშტაბური ისე, როგორც ვექტორული სურათები, თქვენ უნდა მიაწოდოთ თქვენი პიქსელზე დაფუძნებული სურათები ყველაზე დიდი ზომით, რომლითაც ისინი იქნება ნაჩვენები. ეს იმიტომ ხდება, რომ თქვენ ყოველთვის შეგიძლიათ სურათის დაპატარავება და მისი ხარისხის შენარჩუნება, მაგრამ იგივე არ არის მართალი სურათების გადიდების შემთხვევაში. შედეგი არის სურათები, რომლებიც ბევრად აღემატება იმ ზომას, რომლითაც ისინი ნახულობენ, რაც აიძულებს ბრაუზერებს ჩამოტვირთონ დიდი ფაილები.
საპირისპიროდ, ვექტორული გრაფიკა მასშტაბირებადია, ასე რომ თქვენ შეგიძლიათ გამოიყენოთ ძალიან მცირე ზომის ფაილები, მიუხედავად იმისა, თუ რამდენად დიდი შეიძლება დაგჭირდეთ ამ სურათების ჩვენება. ეს საბოლოო ჯამში ოპტიმიზებს საიტის მთლიან მუშაობას და ჩამოტვირთვის სიჩქარეს.
CSS სტილი
შეგიძლიათ მარტივად დაამატოთ SVG პირდაპირ გვერდის HTML-ში. ეს ცნობილია როგორც inline SVG. Inline SVG-ის გამოყენების ერთ-ერთი უპირატესობა ის არის, რომ იმის გამო, რომ გრაფიკა რეალურად დახატულია ბრაუზერის მიერ, არ არის საჭირო HTTP მოთხოვნა სურათის ფაილის მისაღებად.
კიდევ ერთი სარგებელი: შეგიძლიათ ჩართოთ SVG-ის ჩასმა CSS-ით. გჭირდებათ SVG ხატის ფერის შეცვლა? იმის ნაცვლად, რომ დაარედაქტიროთ ეს სურათი გრაფიკული რედაქტირების პროგრამულ უზრუნველყოფაში, შემდეგ კი ფაილის ექსპორტი და ატვირთვა, შეგიძლიათ შეცვალოთ SVG ფაილი უბრალოდ რამდენიმე სტრიქონის CSS-ით. თქვენ შეგიძლიათ გამოიყენოთ CSS SVG-ების შესაცვლელად ჰოვერის მდგომარეობისთვის და დიზაინის სხვა საჭიროებისთვისაც.
ბოლო ხაზი
იმის გამო, რომ თქვენ შეგიძლიათ ჩართოთ SVG ფაილების სტილი CSS-ით, შეგიძლიათ გამოიყენოთ მათზე CSS ანიმაციებიც. CSS გარდაქმნები და გადასვლები ორი მარტივი გზაა SVG-ებისთვის სიცოცხლის დასამატებლად. შეგიძლიათ მიიღოთ მდიდარი Flash-ის მსგავსი გამოცდილება გვერდზე Flash-ის გამოყენების გარეშე, რომელსაც iPad აღარ უჭერს მხარს. ფაქტობრივად, Adobe ეტაპობრივად ამოიღებს Flash-ს 2020 წლის ბოლომდე.
SVG-ის გამოყენება
როგორც ძლიერია SVG, ისინი ვერ შეცვლიან ყველა სხვა გამოსახულების ფორმატს. ფოტოები, რომლებიც საჭიროებენ ფერთა მდიდარ სიღრმეს, მაინც უნდა იყოს-j.webp
SVG ასევე შესაფერისია ზოგიერთი რთული ილუსტრაციისთვის, როგორიცაა გრაფიკები, დიაგრამები და კომპანიის ლოგოები. ყველა ეს გრაფიკა სარგებლობს მასშტაბირებადი და CSS-ით სტილისტიკის უნარით.
მხარდაჭერა ძველი ბრაუზერებისთვის
SVG-ის ამჟამინდელი მხარდაჭერა ძალიან კარგია თანამედროვე ვებ ბრაუზერებში. ერთადერთი ბრაუზერი, რომელსაც არ აქვს ამ გრაფიკის მხარდაჭერა, არის Internet Explorer-ის ძველი ვერსიები (რომელსაც Microsoft აღარ უჭერს მხარს) და Android-ის რამდენიმე ძველი ვერსია. მთლიანობაში, ბრაუზერების პოპულაციის ძალიან მცირე პროცენტი კვლავ იყენებს ამ ბრაუზერებს და ეს რიცხვი მცირდება. ეს ნიშნავს, რომ თქვენ შეგიძლიათ გამოიყენოთ SVG თქვენს ვებსაიტზე შფოთვის გარეშე.
თუ გსურთ SVG-ის სარეზერვო ასლის მიწოდება, გამოიყენეთ ისეთი ინსტრუმენტი, როგორიცაა Grumpicon Filament Group-დან. ეს რესურსი ქმნის PNG-ებს თქვენი SVG გამოსახულების ფაილებიდან.
