CodeKitHubמהו הכלי הזה?
צינורות רינדור מסוימים — יוצרי גופני אייקונים מסוימים, מנועי משחקים מסוימים, מייצאי 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. שחזור חיבורי mitre או bevel מדויקים דורש אלגוריתם שונה ומורכב יותר (חיתוך קטעי קו בכל קודקוד) שכלי זה אינו מיישם. עבור רוב מקרי השימוש באייקונים ואיורים, ההבדל החזותי זעיר, אך אם אתה זקוק לחיבורי mitre מדויקים, פונקציית "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 באותו ערך לנתיב המומר לאחר העתקת הפלט.