შეღავათიანი ვექტორული გრაფიკის გამოყენებით სარგებელი
Scalable ვექტორული გრაფიკა, ან SVG, მნიშვნელოვან როლს თამაშობენ ვებ-დიზაინში დღეს. თუ თქვენ ამჟამად არ იყენებთ SVG- ს თქვენს ვებ დიზაინში, აქ არის რამოდენიმე მიზეზი, რის გამოც უნდა დაიწყოთ ამის გაკეთება, ასევე fallbacks შეგიძლიათ გამოიყენოთ ხანდაზმული ბრაუზერებისათვის, რომლებიც არ იძლევიან ამ ფაილებს.
რეზოლუცია
SVG- ის ყველაზე დიდი სარგებლობა რეზოლუციის დამოუკიდებლობაა. იმიტომ, რომ SVG ფაილები ვექტორული გრაფიკია, ვიდრე pixel- ის რასტრული გამოსახულებების ნაცვლად, მათი განახლება შეუძლებელია ნებისმიერი სურათის ხარისხის დაკარგვის გარეშე. ეს განსაკუთრებით სასარგებლოა, როდესაც თქვენ ქმნით პასუხს ვებსაიტებზე, რომლებიც კარგად უნდა გამოიყურებოდეს და კარგად მუშაობდეთ ეკრანის ზომის და მოწყობილობების ფართო სპექტრში .
SVG ფაილი შეიძლება იყოს მასშტაბური ან ქვემოთ გადაიდგა შეცვლის ზომა და განლაგება საჭიროებების თქვენი საპასუხო ნახვა და თქვენ არ გჭირდებათ ფიქრი იმ გრაფიკა, რომელსაც კომპრომეტირებული ხარისხის ნებისმიერი ნაბიჯი გზა.
ფაილის ზომა
ერთ-ერთი გამოწვევა რასტრული გამოსახულების გამოყენებით (JPG, PNG, GIF) საპასუხო ვებ-გვერდებზე არის სურათების ზომა. იმის გამო, რომ რასტრული გამოსახულებები არ ასახავს იმ გზას, რომელიც ვექტორის მიერ გაკეთებულია, თქვენ უნდა გადმოგცეთ თქვენი pixel- ზე დაფუძნებული სურათების უდიდესი ზომა, სადაც ისინი გამოჩნდება. ეს იმიტომ, რომ თქვენ ყოველთვის შეგიძლიათ გააკეთოთ გამოსახულება უფრო პატარა და შეინარჩუნოს ხარისხი, მაგრამ იგივე არ არის სიმართლის გაკეთება. საბოლოო ჯამში არის ის, რომ თქვენ ხშირად გაქვთ სურათები, რომლებიც გაცილებით უფრო დიდია, ვიდრე ისინი ეკრანზე არიან ნაჩვენები, რაც იმას ნიშნავს, რომ ისინი აუცილებლად იძულებულნი არიან ჩამოტვირთოთ ძალიან დიდი ფაილი.
SVG მიმართავს ამ გამოწვევას. იმის გამო, რომ ვექტორული გრაფიკა არის სკალირებადი, შეგიძლიათ ძალიან მცირე ზომის ფაილის ზომები, მიუხედავად იმისა, თუ რამდენად დიდია სურათების ჩვენება. ეს საბოლოო ჯამში დადებითად აისახება საიტის საერთო შესრულებაზე და ჩამოტვირთვის სიჩქარეზე.
CSS სტილის
SVG კოდი შეიძლება ასევე დაემატოს პირდაპირ HTML გვერდი. ეს არის ცნობილი როგორც "SVG inline". Inline SVG- ის გამოყენების ერთ-ერთი სარგებლობა ის არის, რომ გრაფიკიდან გამომდინარე, თქვენი კოდით დაფუძნებული გრაფიკიდან გამომდინარე, არ არის საჭირო HTTP მოთხოვნის გაკეთება იმიჯი ფაილის მისაღებად. კიდევ ერთი სარგებელი ის არის, რომ inline SVG შეიძლება ე.წ.
უნდა შეცვალოთ SVG ხატის ფერი? იმის ნაცვლად, რომ საჭიროა ამ სურათის გახსნის რაიმე სახის რედაქტირების პროგრამული და ექსპორტი და ატვირთოთ ფაილი კვლავ, შეგიძლიათ უბრალოდ შეცვალოთ SVG ფაილი რამდენიმე ხაზი CSS.
თქვენ ასევე შეგიძლიათ გამოიყენოთ სხვა CSS სტილის SVG გრაფიკა, რათა შეიცვალოს ისინი hover ქვეყნების ან გარკვეული დიზაინის საჭიროებების. ამ სურათის გადაღებაც კი შეგიძლია ჩართოთ გვერდზე გადაადგილებისა და ინტერაქციისთვის.
ანიმაციები
იმის გამო, რომ Inline SVG ფაილი შეიძლება იყოს ე.წ. CSS- ით, თქვენ შეგიძლიათ გამოიყენოთ CSS ანიმაცია მათზე. CSS გარდაქმნას და გადასვლები არის ორი მარტივი გზა SVG ფაილებს დაამატოთ. თქვენ შეგიძლიათ მიიღოთ მდიდარი Flash- ის გამოცდილება გვერდზე, რომელიც არ იშურებს downsides რომ მოდის გამოყენებით Flash on საიტებზე დღეს.
SVG- ის გამოყენება
როგორც ძლიერი, როგორც SVG არის, ეს გრაფიკა ვერ შეცვლის ყველა სხვა გამოსახულების ფორმატი თქვენ იყენებთ თქვენს საიტზე. სურათებს, რომლებიც ღრმა ფერის სიღრმეზე მოითხოვს, ჯერ კიდევ უნდა იყოს JPG ან PNG ფაილი, მაგრამ მარტივი გამოსახულებების მსგავსი ხატები სრულყოფილად შეეფერება SVG- ს.
SVG ასევე შეიძლება იყოს უფრო კომპლექსური ილუსტრაციებისათვის, როგორიცაა კომპანიის ლოგოები ან გრაფიკები და სქემები. ყველა გრაფიკა ისარგებლებს სკალაზე, შეუძლია ე.წ. CSS- ით და ამ სხვა მუხლში ჩამოთვლილი სხვა უპირატესობებით.
ძველი ბრაუზერების მხარდაჭერა
SVG- ის მიმდინარე მხარდაჭერა თანამედროვე ვებ ბრაუზერებში ძალიან კარგია. ერთადერთი ბრაუზერი, რომელსაც ნამდვილად არ უჭერს მხარს ეს გრაფიკი, არის Internet Explorer- ის ძველი ვერსია (ვერსია 8 და ქვემოთ) და Android- ის რამდენიმე ძველი ვერსია. საერთოდ, ბრაუზინგის მოსახლეობის ძალიან მცირე პროცენტში კვლავაც იყენებს ამ ბრაუზერებს და ეს რიცხვი კვლავ მცირდება. ეს იმას ნიშნავს, რომ SVG დღეს საკმაოდ საიმედოდ საიმედოდ გამოიყენება საიტებზე.
თუ გსურთ SVG- ის შემომავალი შემოთავაზება, შეგიძლიათ გამოიყენოთ ისეთი ინსტრუმენტი, როგორიც არის Grumpicon from Filament Group. ეს რესურსი მიიღებს თქვენს SVG ფაილს და ქმნის PNG- ის გაფართოებას ძველი ბრაუზერებისათვის.
რედაქტირებულია Jeremy Girard on 1/27/17