SVG: შექმენით HTML5 გრაფიკა, რომელიც მუშაობს ნებისმიერ ბრაუზერში

გამჟღავნება: თქვენი მხარდაჭერა ხელს უწყობს საიტის მუშაობას! ჩვენ ვიღებთ რეფერალის გადასახადს ზოგიერთი სერვისის შესახებ, რომელსაც გირჩევთ ამ გვერდზე.


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

ამ სტატიაში გაგაცნობთ სხვა ფორმატის გამოსახულების საფუძვლებს: SVG, ან მასშტაბური ვექტორული გრაფიკის ფორმატი.

SVG: მასშტაბური ვექტორული გრაფიკა

Contents

ვექტორი vs რასტერის გამოსახულების ფორმატები

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

ზოგჯერ, რასტრული გამოსახულებები მოიხსენიება როგორც bitmap სურათები, მათი პიქსელის დაფუძნებული ბუნებიდან გამომდინარე. პიქსელები, რა თქმა უნდა, არის ციფრული სურათების უმეტესი კვადრატული სამშენებლო ბლოკი, რომელსაც ინტერნეტში ხედავთ.

თქვენ შეგიძლიათ გითხრათ, არის თუ არა გამოსახულება რასტრული დაფუძნებული (ან bitmap) სურათი, უბრალოდ ახლოდან და (ჩვეულებრივ) მასშტაბური მასშტაბის საშუალებით. თუ ხედავთ მილიონობით პატარა კვადრატს საკმარისად მაღალი რეზოლუციით (განსაკუთრებით ისეთ ადგილებში, სადაც ერთი ფერი იცვლება სხვაზე), უყურებთ პიქსელებს და, ამრიგად, ეს არის სამაგისტრო გამოსახულება..

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

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

შრიფტები და ტიპები ასევე იქმნება ვექტორულ ფორმატებში, ისე, რომ სიმბოლოების კიდეები მკვეთრი და სუფთაა. თუ თქვენ ოდესმე სცადეთ ტექსტური ტექსტის დამატება, Photoshop- ში ან გამოსახულების რედაქტირების სხვა პროგრამაში – მაგალითად, ვებსაიტის სათაურის შესაქმნელად – შემდეგ ოდნავ შეცვალეთ, შეიძლება აღინიშნოს, რომ ტექსტს შეუძლია ზოგჯერ გამოიყურება ragged ბოლოები.

ეს არის ვექტორისა და რასტერის ფორმატებს შორის განსხვავებების გამო; SVG ფორმატში წასვლა არის გზა.

SVG– ს უპირატესობები

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

ასე რომ, როდესაც ზუმერი გადააქვთ რასტრალურ გრაფიკზე – JPG ან PNG ფაილი, მაგალითად, ნახავთ, რომ სურათი უფრო და უფრო დაბინდება და დამახინჯდება.

SVG ფორმატში, თქვენ არ მიიღებთ. თქვენ შეგიძლიათ გაზარდოს და მასშტაბირება, თავად სურათის დამახინჯების გარეშე.

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

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

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

SVG მხარს უჭერს ანიმაციას გამოსახულების ყველა ელემენტისა და ასპექტისთვის. იმის გამო, რომ ისინი ტექსტურადაა დაფუძნებული, ისინი ასევე საძიებო და ინდექსურია და კომპრესებიც.

SVG- ის უარყოფითი მხარეები

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

ზოგიერთი პროგრამა, მაგალითად Adobe Illustrator, დაუყოვნებლივ არ არის ხელმისაწვდომი ყველასთვის, ვისაც ამ სურათებთან მუშაობა სჭირდება, განსხვავებით რედაქტორების (უამრავი მათგანი უფასოა), რომლებიც ხელმისაწვდომია რასტერზე დაფუძნებული სურათებით..

ამასთან, Inkscape არის უფასო, ღია წყაროს რედაქტორი, რომელსაც შეუძლია გაუმკლავდეს SVG ფაილებს.

ვექტორის ფორმატის სხვა გაფართოებები

გარდა SVG (მასშტაბური ვექტორიანი გრაფიკისა), ძირითადი ვექტორული ფაილების გაგრძელება მოიცავს:

  • .drw (ვექტორული ფაილი)
  • .eps (Encapsulated PostScript)
  • .pct (Macintosh bitmap გრაფიკის ფორმატი)
  • .პიფი (ვექტორული სურათი GDF ფორმატით)
  • .ps (Adobe PostScript)
  • .svf (მარტივი ვექტორის ფორმატი)

SVG ელემენტები HTML5

HTML ელემენტების გამოყენებით, თქვენ შეგიძლიათ შექმნათ რამდენიმე ძირითადი ფორმა SVG ბრაუზერში. თითოეულ ამ ელემენტს ნიშის ნიშა უნდა ჰქონდეს.

ხაზი

ელემენტი შეიძლება გამოყენებულ იქნას ერთი სწორი ხაზის შესაქმნელად, რომელიც შედგება ორი წერტილისგან – დასაწყისი და დასასრული. რა თქმა უნდა, თითოეულ წერტილს ექნება ორი კოორდინატი, “x” და “y”.

კოდი ასე გამოიყურება:

თქვენ ასევე შეგიძლიათ დაურთოთ სხვა ატრიბუტები < ხაზი > ელემენტი: ინსულტი განსაზღვრავს ფერს და ინსულტის სიგანე აკონტროლებს ხაზის სისქეს.

რექტო

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

წრე

როგორც თქვენ მოელით, ელემენტი ქმნის წრეს. იმისათვის, რომ შექმნათ წრე, რომელსაც აქვს რადიუსი 40 (დაყენებულია r ატრიბუტით), ცენტრალურია 40 პიქსელი ქვემოთ და 40 მარცხენა ზედა მარცხენა კუთხიდან, მწვანე შევსებით და შავი მონახაზით, გამოიყენეთ ქვემოთ მოცემული კოდი:

თუ არ მიუთითებთ cx და cy ატრიბუტებს, ბრაუზერი ინტერპრეტაციას უკეთებს მნიშვნელობას “0.”.

სხვა ელემენტები, რომელთა გარშემოც შეგიძლიათ ითამაშოთ, მოიცავს და .

ბრაუზერის მხარდაჭერა

SVG კარგად არის მხარდაჭერილი ყველა მსხვილ ხელმისაწვდომი ბრაუზერში, IE8 და უფრო ადრე ვერსიების გამოკლებით.

რაც შეეხება SWF- ს?

გამოცდილი დიზაინერები და დეველოპერები კარგად იციან SWF – Flash ანიმაციებისა და გრაფიკების ფორმატს – და სანამ SVG უკვე საკმაოდ დიდი ხანია არსებობს, ბოლო რამდენიმე წლის განმავლობაში, მას მხოლოდ მისი მხარდაჭერა არ აქვს..

Flash– ის მხარდაჭერით HTML5, CSS, JavaScript და SVG სასარგებლოდ, ძალზე მნიშვნელოვანია, რომ ვებ პროფესიონალებმა გაიგონ განსხვავებები SVG და SWF შორის და ისწავლონ თანამედროვე ტექნოლოგიების გამოყენება..

რა არის SWF?

SWF არის აბრევიატურა, რომელიც განკუთვნილია მცირე ვებ ფორმატისთვის. ეს არის Adobe Flash ფაილის ფორმატი, რომელიც შეიძლება გამოყენებულ იქნას გრაფიკაში, ანიმაციებსა და აპლიკაციური ვიჯეტისთვის. Flash მოდული უნდა იყოს დაინსტალირებული ბრაუზერში, რათა SWF შინაარსი გადმოწეროთ.

SWF უკვე დიდი ხანია არსებობს, მხარდაჭერილია გამოცდილი დეველოპერების დიდი აუზით, ასევე ხელმისაწვდომია მრავალი წინასწარ ჩაშენებული SWF ანიმაცია და სამეურვეო პროგრამა..

მსგავსება და განსხვავებები SVG და SWF შორის

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

SVG არის ღია სტანდარტული სტანდარტი

SVG სტანდარტი შეიმუშავა მსოფლიო ქსელმა კონსორციუმმა (W3C) და, შედეგად, სრულად გახსნა და უფასოა მისი გამოყენებისა და მშენებლობისთვის. SWF, მეორეს მხრივ, არის Flash- ის საკუთრების ფორმატის ფორმა, რომელსაც ეკუთვნის Adobe. 2008 წელს Adobe ამოიღო მრავალი შეზღუდვა, რომელიც არეგულირებს SWF– ების გამოყენებას, მაგრამ SWF რჩება საკუთრების ფორმატში.

SVG უფრო ადვილია ვიმუშაოთ

SVG კოდი არის ადამიანის იკითხება მარტივი ტექსტი XML. SVG– ების შექმნა შესაძლებელია ტექსტური ტექსტის ნებისმიერი რედაქტორის გამოყენებით და მარტივი SVG– ების შექმნა მარტივია და ამის სწრაფად სწავლა შეგიძლიათ ყველას მიერ, ვინც იცნობს ვებ – ენებს, როგორიცაა HTML, CSS და JavaScript. SWF– ები უნდა შეიქმნას და რედაქტირდეს ისეთი რთული პროგრამებით, როგორიცაა Adobe After Effects ან ღია წყაროების ალტერნატივები, როგორიცაა Motion-Twin ActionScript 2 შემდგენელი.

გარდა ამისა, SVG– ების ანიმაციისა და ინტერაქტიულობისთვის სკრიპტირება შესაძლებელია CSS– სა და JavaScript– ზე – ენებზე, რომელზეც ყველა ვებ დიზაინერი და დეველოპერი მუშაობს ყოველდღიურად. SWF- ები, სხვა მხრივ, იწერენ Adobe’s ActionScript- ს, რომელიც მსგავსია JavaScript- ს, მაგრამ არა იდენტური, და დეველოპერების უმეტესობა მას უფრო ნაკლებად ხშირად განიხილავს..

SVG ვებსაიტზე დამატება ასევე მარტივია, როგორც კოდის HTML დოკუმენტში გადატანა სხვა HTML ელემენტებთან შესაბამისობაში. ალტერნატიულად, SVG შეიძლება ჩასვათ HTML დოკუმენტში. SWF– ები უნდა იყოს ჩასმული HTML დოკუმენტში.

SVG უკეთესია SEO- სთვის

მას შემდეგ, რაც SVG– ები წერია ტექსტური ტექსტით, მათი წაკითხვა და ინდექსირება შესაძლებელია საძიებო სისტემების მიერ. SWFs, მეორეს მხრივ, არის ორობითი ფაილები, რომლებიც ძნელია საძიებო სისტემების ინტერპრეტაცია. შედეგად, თუ თქვენ იყენებთ SVG ან SWF შინაარსის გადასაცემად, უმჯობესია გამოიყენოთ SVG გამოიყენოთ, თუ საძიებო სისტემის ტრაფიკი მნიშვნელოვანია თქვენი ვებ – გვერდისთვის.

SVG მხარდაჭერა იზრდება

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

SVG და SWF მხარდაჭერა მრავალ მედია ტიპებს

ხმის და ვიდეო შინაარსის ჩანერგვა შეიძლება პირდაპირ SWF ფაილში. SVG არ შეიცავს ხმის და ვიდეო შინაარსის მხარდაჭერას. ამასთან, HTML5 სხვა მახასიათებლებს მხარს უჭერს აუდიო და ვიდეო შინაარსს და ამ მახასიათებლების პირდაპირ ჩართვა შესაძლებელია SVG– ში. შედეგად, აუდიო და ვიდეო შეიძლება ჩასვათ SVG- ში, მაგრამ დაკვრას ასრულებენ სხვა მოთამაშეები და არა თავად SVG სტანდარტი..

SWF რეზიუმე

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

SVG რესურსები

არსებობს მრავალი უფასო სტატია, გაკვეთილი და სახელმძღვანელო, რომლებიც დაგეხმარებათ SVG– ს დასაწყებად. აქ არის რამდენიმე საუკეთესო.

შეიტყვეთ საფუძვლები

თუ თქვენ მხოლოდ SVG– ს დაიწყებთ, შეამოწმეთ ეს გაკვეთილი Creative Bloq– დან მარტივი ფორმების შესაქმნელად და შევსების და გრადიენტაციების შესაქმნელად. მეორე ვარიანტი, რომელიც მოიცავს უამრავ იმავე საბაზისო ტექნიკას, არის ეს სახელმძღვანელო, SVG– დან დასაწყებად Envato Tuts– დან+.

გამოიყენეთ გრაფიკული პროგრამული უზრუნველყოფა SVG– ების შესაქმნელად

თუ თქვენ აპირებთ შექმნათ რაიმე უფრო რთული, ვიდრე მარტივი ფორმები, გსურთ იმუშაოთ ვექტორული გრაფიკული პროგრამით, როგორიცაა Adobe Illustrator, რომელსაც შეუძლია ფაილების ექსპორტი SVG ფორმატით. CSS-Tricks– ის ამ სწრაფი ჩანაწერი გაჩვენებთ თუ როგორ გამოიყენოთ Illustrator ანიმაციური რეკლამის შესაქმნელად, რომელიც მხოლოდ HTML და CSS იყენებს. კიდევ ერთი დიდი რესურსი იმის შესახებ, თუ როგორ გამოიყენოთ ილუსტრატორი SVG– ების შესაქმნელად, გამოდის ვებ დიზაინერის დეპოდან.

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

შეიტყვეთ მოწინავე SVG ტექნიკა

თუ ნამდვილად დაეუფლეთ SVG- ს, ორი რესურსი გჭირდებათ, რომ გარკვეული დრო დახარჯოთ:

  • SVG სამეურვეო პროგრამა Mozilla Developer Network- დან.
  • SVG პრაიმერი დღევანდელი ბრაუზერებისათვის, უფასო წიგნი W3C- დან.

ორივე ეს რესურსი ფართო მასშტაბით არის და მოიცავს ამჟამინდელი აზროვნებისა და პრაქტიკის ფართო მასშტაბს SVG პროგრამირების თვალსაზრისით. ეს რესურსები დამწყებთათვის არ არის, მაგრამ თუ HTML და CSS კომფორტულად კმაყოფილდებით და გინდათ გახდეთ პროფესიონალი SVG– ზე მუშაობისას, მაშინ მზად ხართ.

შექმენით SVG ანიმაციები

SVG შეგიძლიათ გამოიყენოთ ნამდვილად შთამბეჭდავი ანიმაციის შესაქმნელად. SVG– სთან მუშაობის დროს, თუ გსურთ შეიტყოთ როგორ შექმნათ შთამბეჭდავი SVG ანიმაციები, შეამოწმეთ ეს რესურსი:

  • სამეურვეო პროგრამა დევიდ ვალშისგან CV და JavaScript გამოყენებით SVG ანიმაციების შესაქმნელად.
  • ვრცელი სახელმძღვანელო Jenkov– დან, რომელიც მოიცავს SVG– სთან მუშაობის ყველა ასპექტს, მათ შორის CSS ანიმაციას და JavaScript სკრიპტირებას..
  • ჰონგკატის სიას რვა წამყვანი JavaScript ბიბლიოთეკა SVG ანიმაციების შესაქმნელად.

შემდგომი რესურსები

  • Mozilla Developers Network SVG Tutorial: მიმდინარე სასწავლო პროგრამა, რომელიც განიხილავს SVG ფორმატის ყველა ასპექტს Mozilla ბრაუზერებში გამოსაყენებლად..
  • Simple Intro to SVG ანიმაცია: შესანიშნავი გაკვეთილი, რომელიც დაწერილია დევიდ ვალშის მიერ.
  • ImageMagick შესავალი და რესურსები: გრაფიკული ინსტრუმენტების კოლექცია, რომელიც მოიცავს PostScript- სთვის.

დასკვნა

SVG- ს გამოყენებას თქვენს გრაფიკულ ქმნილებებში და ვებ – დიზაინში გამოყენება შეიძლება არ იყოს ის, რაც თქვენ გამოიყენეთ კარიბჭის გასასვლელად, მაგრამ ეს უდავოდ ღირსეული მცდელობაა გაეცნოთ მათ. იმედია, ეს ყველაფერი დაგეხმარებათ სწავლის სახელმძღვანელოში.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map