SVG კონტურის შევსებად გადამყვანი — გადააქციეთ კონტურები შევსებულ ბილიკებად

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

რა არის ეს ხელსაწყო?

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

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

რატომ გამოვიყენო ის?

მუშაობს path, line, polyline, polygon, rect, circle და ellipse ელემენტებზე — არა მხოლოდ <path>-ზე — ერთი უნიფიცირებული სემპლირების მეთოდის გამოყენებით.
ინარჩუნებს ფორმის საკუთარ შევსებას (თუ ჰქონდა) როგორც ცალკე ფენას ახალი კონტურ-შევსების ქვეშ, ისე რომ შევსებული და კონტურიანი ფორმები სწორად გადაიყვანება.
გვერდიგვერდ „მანამდე/შემდეგ“ გადახედვა, რათა ვიზუალურად დაადასტუროთ გადაყვანა, სანამ შედეგს დააკოპირებთ.
მუშაობს მთლიანად თქვენს ბრაუზერში — SVG, რომელსაც ჩასვამთ, არასდროს იტვირთება არსად.
უფასო, მყისიერი, ფაილის ზომის შეზღუდვის გარეშე, გარდა იმისა, რასაც თქვენი ბრაუზერი შეძლებს რენდერს.

როგორ გამოვიყენო

ჩასვით თქვენი SVG კოდი ტექსტურ ველში (მუშა მაგალითი წინასწარაა შევსებული).
დააჭირეთ „Convert strokes to fills“-ს.
შეადარეთ „მანამდე/შემდეგ“ გადახედვა, რომ დაადასტუროთ შედეგის სისწორე.
დააჭირეთ „Copy SVG“-ს გადაყვანილი, კონტურისგან თავისუფალი კოდის დასაკოპირებლად.

მაგალითი

შეყვანა

<path d="M20 100 Q100 20 180 100" fill="none" stroke="#3B82F6" stroke-width="12"/>

შედეგი

ერთი <path fill="#3B82F6">, რომლის კონტური მიჰყვება ორიგინალი მრუდის ორივე მხარეს, 12 ერთეულის მანძილზე, სრულიად stroke ატრიბუტის გარეშე.

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

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

რატომ გამოდის მკვეთრი კუთხეები დამრგვალებული, ნაცვლად წამახული (mitered)?

ეს არის სემპლირების მიდგომის ცნობილი, განზრახ გამარტივება: ბილიკის გასწვრივ წერტილების მკვრივი სემპლირება ბუნებრივად წარმოქმნის დამრგვალებულ შეერთებებსა და ბოლოებს, მიუხედავად stroke-linejoin ან stroke-linecap-ის ორიგინალი მნიშვნელობისა. ზუსტი მიტრის ან ჩამოკვეთილი შეერთებების აღდგენა მოითხოვს განსხვავებულ, უფრო რთულ ალგორითმს (ხაზის სეგმენტების გადაკვეთა თითოეულ წვეროზე), რომელსაც ეს ინსტრუმენტი არ ახორციელებს. ხატულებისა და ილუსტრაციების უმეტესი გამოყენების შემთხვევისთვის ვიზუალური განსხვავება უმნიშვნელოა, მაგრამ თუ გჭირდებათ ზუსტი მიტრის შეერთებები, სპეციალიზებული ვექტორული რედაქტორის „outline stroke“ ფუნქცია უფრო ზუსტი იქნება.

ამუშავებს ეს წყვეტილ კონტურებს (stroke-dasharray)?

არა — ინსტრუმენტი ყოველ კონტურს განიხილავს როგორც მყარს და უგულებელყოფს stroke-dasharray/stroke-dashoffset-ს. წყვეტილი კონტური გადაყვანილი იქნება ისე, თითქოს მყარი იყოს, რაც ცვლის მის იერსახეს. თუ თქვენი SVG იყენებს წყვეტილ კონტურებს, ეს ინსტრუმენტი შესაფერისი არ არის ამ კონკრეტული ფორმებისთვის.

რატომ არაფერი გადაყვანილა?

ინსტრუმენტი გადაყავს მხოლოდ ელემენტებს, რომლებსაც აქვთ როგორც კონტურის ფერი (არა „none“), ისე დადებითი stroke-width, დაყენებული ატრიბუტების ან ელემენტის საკუთარი სტილის სახით. თუ თქვენი SVG კონტურს აყენებს გარე CSS კლასის მეშვეობით, რომლის ამოხსნაც ბრაუზერს ამ ინსტრუმენტის იზოლირებულ გადახედვაში არ შეუძლია, ან <style> ბლოკის მეშვეობით, რომელიც კლასებზე მიუთითებს, გამოთვლილი სტილი შესაძლოა სწორად არ ამოიხსნას — სცადეთ ამის ნაცვლად stroke და stroke-width პირდაპირ ატრიბუტებად დააყენოთ ფორმაზე.

როდის უნდა გადავიყვანო კონტურები შევსებებად და როდის შევინარჩუნო კონტურები?

თუ ჯერ კიდევ დიზაინზე მუშაობთ, შეინარჩუნეთ კონტურები — stroke-width რჩება რედაქტირებადი როგორც ერთი რიცხვი, რასაც კარგავთ გადაყვანის შემდეგ. თუ ექსპორტავთ მილსადენში, რომელიც არასწორად ამუშავებს კონტურებს (ხატულების ფონტების გენერატორები, გარკვეული თამაშის ძრავები ან PDF ექსპორტიორები), გადაიყვანეთ როგორც საბოლოო ექსპორტის ეტაპი და შეინარჩუნეთ ორიგინალი კონტურიანი ფაილი როგორც თქვენი რედაქტირებადი წყარო, ვინაიდან გადაყვანა ცალმხრივია.

ხდის თუ არა გადაყვანა SVG ფაილს უფრო დიდს?

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

გადადის თუ არა stroke-opacity გადაყვანილ შევსებაზე?

არა — გადაყვანილი ბილიკი იღებს კონტურის ფერს როგორც შევსებას, მაგრამ სრული გაუმჭვირვალობით; ორიგინალი ფორმის stroke-opacity მნიშვნელობა უგულებელყოფილია. თუ გჭირდებათ გამჭვირვალობის შენარჩუნება, ხელით დაამატეთ fill-opacity იმავე მნიშვნელობით გადაყვანილ ბილიკზე გამოსავლის დაკოპირების შემდეგ.