סוף סוף SVG

משך זמן קריאה: 7 דקות

כבר מזמן SVG איננו תופעה חולפת או טרנד חדש. הוא לגמרי חלק בלתי נפרד מתכנות ועיצוב אתרים (ואם אתם לא יודעים מה זה, זה הזמן לקרוא). אז איך זה שרק עכשיו אני מגיעה אליו?  שאלה קשה שאין לי ממש תשובה עליה. לא יצא, לא הגעתי לזה, לא היה לנו צורך – אלו תירוצים עלובים. אבל די עם ההלקאה העצמית – העיקר שאני מגיעה לזה עכשיו.

כבר המון זמן אני שומרת לי קישורים על SVG. חלק מהפוסטים בסיסיים ויחסית ישנים כמו זה משנת 2013, ועד ליצירת ספרייט ב SVG, אבל עד עכשיו לא ממש התעמקתי בהם. היו כמה פרויקטים שבהם ניסינו להמיר תמונות (בעיקר PNG) בקבצי SVG אבל לא המשכנו הלאה וכמעט תמיד חזרנו לתמונה רגילה 🙁

הפעם אין לי פרויקט שהתנסיתי בו בעבודה עם SVG, אבל אם אין פרויקטים מוגדרים – תמיד אפשר ליזום אותם. ואין מקום מוצלח לזה (בעייני) מאשר נסיונות ב-code-pen.

עד שהתחלתי לשחק עם הכנסת SVG תמיד חשבתי עליו כתמונת רקע – במקום להשתמש בספרייט של PNG נשתמש בספרייט של  SVG וככה פתרנו את עניין ההתאמה למסכי רטינה, ושמירה על איכות ברזולוציות שונות. אבל זה ממש לא העניין…. דווקא שימוש ב SVG כ-background-image הוא הפחות עדיף, והטמעות אחרות שלו הן יותר מוצלחות וניתן לעשות עליהם יותר מניפולציות עם CSS או עם JS.

אז יצאתי לדרך עם שני מאמרים מאוד ברורים ונוחים להבנה הבסיסית של איך אפשר להשתמש ב SVG:

שני הפוסטים מאוד מפורטים ומסבירים מה האפשרויות בשילוב SVG בעיצוב שלנו, מה היתרונות ומה החסרונות. אני מצאתי את הפוסט הראשון של Jake Giltsoff יותר נעים לקריאה ויותר מפשט את הדברים. יחד עם זאת, בפוסט של Chris Coyier בסופו יש אמבד של סרטון שמציג workflow בשילוב SVG והסרטון הזה הוא שהניע אותי לפעולה.

פה ניתן לראות את הסרטון: An Optimized SVG Workflow ובעקבות ההדרכה הזאת, Kyle Foster העלה עוד סרטון הדרכה שכלל מסקנות ותובנות מכל התגובות שעלו בעקבות הסרטון הראשון. מומלץ בחום ומעניין. ממש לא ארוך – שווה את ה 10 דקות צפייה.

אז התחלתי.
המשימה שלי הייתה ליצור רשימה של לינקים שלכל אחד מהם יש אייקון. את ה-SVG הורדתי מהאתר iconfinder ובתור התחלה השתמשתי בו כמו שהוא (בלי שום אופטימיזציה). החלטתי שלכל li ברשימה שלי אני אנסה לצרף את ה SVG בדרך אחרת (בסופו של דבר לא התנסיתי בכל האופציות וניתן לראות פה אופציות נוספות).

See the Pen playing with svg by Rachel Bratt Tannenbaum (@rachelbt) on CodePen.

ב-li הראשון הכנסתי את ה הקוד של ה-SVG inline בתוך ה HTML:

<li>
  <?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.0//EN'  'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'><svg height="110px" style="enable-background:new 0 0 110 110;" version="1.0" viewBox="0 0 110 110" width="110px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Multicolor"><g><path d="M27,83V25c0-1.105-0.895-2-2-2s-2,0.895-2,2v62h62c1.105,0,2-0.895,2-2s-0.895-2-2-2H27z" style="fill:#F0F1F1;"/><rect height="16" style="fill:#0484AB;" width="12" x="33" y="67"/><rect height="27" style="fill:#0484AB;" width="12" x="51" y="56"/><rect height="49" style="fill:#0484AB;" width="12" x="69" y="34"/><path d="M70.271,44.665c0.403-9.111-6.655-16.824-15.766-17.227c-9.111-0.403-16.824,6.655-17.227,15.766    c-0.126,2.838,0.474,5.539,1.632,7.927L24.613,65.465c1.15,3.433,3.442,5.72,6.878,6.861l14.051-14.087    c2.22,1.28,4.765,2.072,7.502,2.193C62.155,60.834,69.868,53.776,70.271,44.665z" style="fill:#9CE5F4;"/><path d="M54.505,27.438c-9.111-0.404-16.824,6.655-17.227,15.766c-0.126,2.837,0.474,5.539,1.632,7.927    L24.613,65.465c0.64,1.913,1.649,3.456,2.999,4.657L65.45,32.284C62.633,29.459,58.804,27.628,54.505,27.438z" style="fill:#C9F2F8;"/><circle cx="53.775" cy="43.934" r="11.795" style="fill:#40C9E7;"/><path d="M54.296,32.151c-6.508-0.288-12.017,4.754-12.305,11.261c-0.153,3.448,1.2,6.606,3.465,8.865    l16.661-16.662C60.105,33.596,57.369,32.287,54.296,32.151z" style="fill:#6FDAF1;"/><path d="M38.91,51.131L24.613,65.465c1.15,3.433,3.442,5.72,6.878,6.861l14.051-14.087    C42.674,56.584,40.354,54.106,38.91,51.131z" style="fill:#84462D;"/><path d="M38.91,51.131L24.613,65.465c0.64,1.913,1.649,3.456,2.999,4.657L42.124,55.61    C40.818,54.31,39.722,52.803,38.91,51.131z" style="fill:#9C6144;"/><path d="M42.506,61.281l3.035-3.043c-2.868-1.654-5.188-4.132-6.631-7.107l-3.282,3.29L42.506,61.281z" style="fill:#F3B607;"/><path d="M38.91,51.131l-3.282,3.29l3.847,3.838l2.648-2.648C40.818,54.31,39.722,52.803,38.91,51.131z" style="fill:#FBE158;"/></g></g></svg>
    svg as is from iconfiner
  </li>

ב-li השני עשיתי די אותו דבר, רק שהוספתי בתוך הקוד class:

<li>
    <?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.0//EN' 
     'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'>
     <svg  class="svg-style" ....</svg>
</li>

תכל'ס לא ממש הייתי צריכה, כי אפשר לפנות ככה אליו גם ככה:  .list li svg{...} , אבל אני בענייני התנסות – אז למה לא? 🙂

נתתי ל-svg הגדרה של רוחב וגובה שונה ממה שיש לו, כדי לראות שינוי. הכנסתי בורדר לכל ה-svg כדי שיהיה קל לראות את הגודל שלהם.

ב li השלישי הכנסתי את ה-svg כתמונת רקע – לא של ה li, אלא של :before שלו. למה, הרי אפשר כתמונת רקע של ה li? אז ככה – אני אוהבת פסדו אלמנטים ואני מוצאת אותם קלים יותר ליישור ברשימות. אבל לא רציתי להכניס אותו סתם בתור תמונת רקע – היות ואין הרבה הבדל בין זה לבין סתם PNG ברמת ההתנסות, אז מה שונה – לכן הכנסתי את תמונת הרקע בתור image-data. היתרון של השימוש הזה הוא שאין עוד קריאת http לשרת, החסרון הוא הקוד הלא יפה שיש בקובץ style.

הדרך לייצר image-data פשוטה ומובאת בסרטון שהמלצתי עליו קודם, ואלו העיקרי הדברים:

.data:before{
  content: '';
  position: absolute;
  left: 0;
  width: 110px;
  height: 110px;
  display: block;
  border: 1px solid blue;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMC8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvVFIvMjAwMS9SRUMtU1ZHLTIwMDEwOTA0L0RURC9zdmcxMC5kdGQnPjxzdmcgaGVpZ2h0PSIxMTBweCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTEwIDExMDsiIHZlcnNpb249IjEuMCIgdmlld0JveD0iMCAwIDExMCAxMTAiIHdpZHRoPSIxMTBweCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGcgaWQ9Ik11bHRpY29sb3IiPjxnPjxwYXRoIGQ9Ik0yNyw4M1YyNWMwLTEuMTA1LTAuODk1LTItMi0ycy0yLDAuODk1LTIsMnY2Mmg2MmMxLjEwNSwwLDItMC44OTUsMi0ycy0wLjg5NS0yLTItMkgyN3oiIHN0eWxlPSJmaWxsOiNGMEYxRjE7Ii8+PHJlY3QgaGVpZ2h0PSIxNiIgc3R5bGU9ImZpbGw6IzA0ODRBQjsiIHdpZHRoPSIxMiIgeD0iMzMiIHk9IjY3Ii8+PHJlY3QgaGVpZ2h0PSIyNyIgc3R5bGU9ImZpbGw6IzA0ODRBQjsiIHdpZHRoPSIxMiIgeD0iNTEiIHk9IjU2Ii8+PHJlY3QgaGVpZ2h0PSI0OSIgc3R5bGU9ImZpbGw6IzA0ODRBQjsiIHdpZHRoPSIxMiIgeD0iNjkiIHk9IjM0Ii8+PHBhdGggZD0iTTcwLjI3MSw0NC42NjVjMC40MDMtOS4xMTEtNi42NTUtMTYuODI0LTE1Ljc2Ni0xNy4yMjdjLTkuMTExLTAuNDAzLTE2LjgyNCw2LjY1NS0xNy4yMjcsMTUuNzY2ICAgIGMtMC4xMjYsMi44MzgsMC40NzQsNS41MzksMS42MzIsNy45MjdMMjQuNjEzLDY1LjQ2NWMxLjE1LDMuNDMzLDMuNDQyLDUuNzIsNi44NzgsNi44NjFsMTQuMDUxLTE0LjA4NyAgICBjMi4yMiwxLjI4LDQuNzY1LDIuMDcyLDcuNTAyLDIuMTkzQzYyLjE1NSw2MC44MzQsNjkuODY4LDUzLjc3Niw3MC4yNzEsNDQuNjY1eiIgc3R5bGU9ImZpbGw6IzlDRTVGNDsiLz48cGF0aCBkPSJNNTQuNTA1LDI3LjQzOGMtOS4xMTEtMC40MDQtMTYuODI0LDYuNjU1LTE3LjIyNywxNS43NjZjLTAuMTI2LDIuODM3LDAuNDc0LDUuNTM5LDEuNjMyLDcuOTI3ICAgIEwyNC42MTMsNjUuNDY1YzAuNjQsMS45MTMsMS42NDksMy40NTYsMi45OTksNC42NTdMNjUuNDUsMzIuMjg0QzYyLjYzMywyOS40NTksNTguODA0LDI3LjYyOCw1NC41MDUsMjcuNDM4eiIgc3R5bGU9ImZpbGw6I0M5RjJGODsiLz48Y2lyY2xlIGN4PSI1My43NzUiIGN5PSI0My45MzQiIHI9IjExLjc5NSIgc3R5bGU9ImZpbGw6IzQwQzlFNzsiLz48cGF0aCBkPSJNNTQuMjk2LDMyLjE1MWMtNi41MDgtMC4yODgtMTIuMDE3LDQuNzU0LTEyLjMwNSwxMS4yNjFjLTAuMTUzLDMuNDQ4LDEuMiw2LjYwNiwzLjQ2NSw4Ljg2NSAgICBsMTYuNjYxLTE2LjY2MkM2MC4xMDUsMzMuNTk2LDU3LjM2OSwzMi4yODcsNTQuMjk2LDMyLjE1MXoiIHN0eWxlPSJmaWxsOiM2RkRBRjE7Ii8+PHBhdGggZD0iTTM4LjkxLDUxLjEzMUwyNC42MTMsNjUuNDY1YzEuMTUsMy40MzMsMy40NDIsNS43Miw2Ljg3OCw2Ljg2MWwxNC4wNTEtMTQuMDg3ICAgIEM0Mi42NzQsNTYuNTg0LDQwLjM1NCw1NC4xMDYsMzguOTEsNTEuMTMxeiIgc3R5bGU9ImZpbGw6Izg0NDYyRDsiLz48cGF0aCBkPSJNMzguOTEsNTEuMTMxTDI0LjYxMyw2NS40NjVjMC42NCwxLjkxMywxLjY0OSwzLjQ1NiwyLjk5OSw0LjY1N0w0Mi4xMjQsNTUuNjEgICAgQzQwLjgxOCw1NC4zMSwzOS43MjIsNTIuODAzLDM4LjkxLDUxLjEzMXoiIHN0eWxlPSJmaWxsOiM5QzYxNDQ7Ii8+PHBhdGggZD0iTTQyLjUwNiw2MS4yODFsMy4wMzUtMy4wNDNjLTIuODY4LTEuNjU0LTUuMTg4LTQuMTMyLTYuNjMxLTcuMTA3bC0zLjI4MiwzLjI5TDQyLjUwNiw2MS4yODF6IiBzdHlsZT0iZmlsbDojRjNCNjA3OyIvPjxwYXRoIGQ9Ik0zOC45MSw1MS4xMzFsLTMuMjgyLDMuMjlsMy44NDcsMy44MzhsMi42NDgtMi42NDhDNDAuODE4LDU0LjMxLDM5LjcyMiw1Mi44MDMsMzguOTEsNTEuMTMxeiIgc3R5bGU9ImZpbGw6I0ZCRTE1ODsiLz48L2c+PC9nPjwvc3ZnPg==);    
}

ב-li האחרון שוב השתמשתי ב-inline אבל הפעם העברתי את ה-svg שלי אופטימיזציה.

אני לא מתיימרת להביא פה הסבר מפורט איך עושים את זה. Kyle Foster הראה שיטה של שיטוח כל השכבות באילוסטרייטור לשכבה אחת והפיכתה ל-path מה שמקל מאוד על המשקל – אבל האיחוד של הכל יצר גם איחוד של הצבעים. אז נשארתי עם לא מעט שאלות – ועם אתגר – כן לנסות קצת לסדר את ה-svg בעזרת האילוסטרייטור. לצערי הרב אני לא מכירה מספיק את התוכנה הזאת. תנו לי פוטושופ, שם אני שולטת – אבל אילוסטרייטור תמיד מצליחה להפתיע אותי מחדש בשונות שלה מהפוטושופ למרות שלשתיהן אותו אבא ואמא.

פתחתי את קובץ ה-SVG באילוסטרייטור, שם ראיתי יש לי הרבה שטח לבן מסביב לאייקון שאני לא ממש צריכה. אחרי התבחבשות לא קצרה, ועזרה מחברה לחדר – הבנתי איך להשאר רק עם האייקון עצמו:

svg in illustrator

אחרי ששמרתי את הקובץ (לא עשיתי כלום מעבר לעיל), פתחתי אותו ב notepad++ ואז ניקיתי את הקוד עוד קצת לפי מה שהומלץ בסרטון הדרכה.

ואז ה-svg שלי נראה ככה:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1339 961.3 64 64"><style type="text/css">.st1{fill:#0484AB;}</style><g id="Multicolor"><path fill="#F0F1F1" d="M-1335 1021.3v-58c0-1.1-0.9-2-2-2s-2 0.9-2 2v62h62c1.1 0 2-0.9 2-2s-0.9-2-2-2H-1335z"/><rect x="-1329" y="1005.3" class="st1" width="12" height="16"/><rect x="-1311" y="994.3" class="st1" width="12" height="27"/><rect x="-1293" y="972.3" class="st1" width="12" height="49"/><path fill="#9CE5F4" d="M-1291.7 982.9c0.4-9.1-6.7-16.8-15.8-17.2s-16.8 6.7-17.2 15.8c-0.1 2.8 0.5 5.5 1.6 7.9l-14.3 14.3c1.1 3.4 3.4 5.7 6.9 6.9l14.1-14.1c2.2 1.3 4.8 2.1 7.5 2.2C-1299.8 999.1-1292.1 992-1291.7 982.9z"/><path fill="#C9F2F8" d="M-1307.5 965.7c-9.1-0.4-16.8 6.7-17.2 15.8-0.1 2.8 0.5 5.5 1.6 7.9l-14.3 14.3c0.6 1.9 1.6 3.5 3 4.7l37.8-37.8C-1299.4 967.7-1303.2 965.9-1307.5 965.7z"/><circle fill="#40C9E7" cx="-1308.2" cy="982.2" r="11.8"/><path fill="#6FDAF1" d="M-1307.7 970.4c-6.5-0.3-12 4.8-12.3 11.3-0.2 3.4 1.2 6.6 3.5 8.9l16.7-16.7C-1301.9 971.8-1304.6 970.5-1307.7 970.4z"/><path fill="#84462D" d="M-1323.1 989.4l-14.3 14.3c1.1 3.4 3.4 5.7 6.9 6.9l14.1-14.1C-1319.3 994.8-1321.6 992.4-1323.1 989.4z"/><path fill="#9C6144" d="M-1323.1 989.4l-14.3 14.3c0.6 1.9 1.6 3.5 3 4.7l14.5-14.5C-1321.2 992.6-1322.3 991.1-1323.1 989.4z"/><path fill="#F3B607" d="M-1319.5 999.5l3-3c-2.9-1.7-5.2-4.1-6.6-7.1l-3.3 3.3L-1319.5 999.5z"/><path fill="#FBE158" d="M-1323.1 989.4l-3.3 3.3 3.8 3.8 2.6-2.6C-1321.2 992.6-1322.3 991.1-1323.1 989.4z"/></g></svg>

תחת תגית ה-svg הורדתי את כל מה שבא עם הקובץ והשארתי רק את מה שצריך:

xmlns="http://www.w3.org/2000/svg"
viewBox="-1339 961.3 64 64"

אחרי זה העברתי אותו שוב באופטימיזציה, והגעתי למשקל של 1.46KB שזה נחמד (התחלתי עם 2. אכן, לא הבדל גדול, אבל כל בייט נחשב 🙂 )

מה שכן – אם מורידים את הגדרת הגובה והרוחב של ה-SVG, צריך לתת לו הגדרות כאלו ב-style. לדוגמה:

.optimized svg{
  width: 64px;
  height: 64px;
}

עד פה נסיונותיי הבראשיתיים ב-SVG. על פניו – נראה לי הכי נוח להכניס אותם inline ואם עובדים ב-php  אפשר לשמור את ה-svg כקובץ נפרד ואז להביא אותו עם הפקודה:

<?php
get_template_part( 'images/logo', 'logo.svg' );
?>

אפשר לקרוא עוד על תהליך העבודה עם svg בוורדפרס

מה הלאה? כמו שאומרים – השמיים הם הגבול ואני לגמרי מרגישה ככה עם svg, יש כל כך הרבה לקרוא ולהבין ואז להשתמש, ועוד לא הגעתי לקצה… (כמו למשל אנימציות שאפשר לעשות עם svg). הלוואי ויהיו לי עוד התנסויות לכתוב עליהם – בינתיים אסתפק ברשימת לינקים מומלצים לקריאה 🙂

דבר אחרון שקשור לעניין: svg התחיל להחליף בהרבה מקומות את ה icon-fonts. וורדפרס פרסמו בבלוג שלהם פוסט שמסביר את המעבר שלהם מ icon-fonts ל svg. מעניין לקרוא (במיוחד מעניין ש-svg הייתה הבחירה הראשונית שלהם והם זנחו אותה לטובת icon-fonts בשל תמיכה רחבה יותר של דפדנים והנה עכשיו – הרוחות קצת משתנות בנושא תמיכה ל-svg). פוסט נוסף בנושא icon-font ו-svg כתב Tyler Sticka על למה לא להשתמש בפונט-אייקון: Seriously, Don’t Use Icon Fonts בו הוא מפרט את היתרונות של svg על פני icon-font, כמו למשל תמיכה טובה יותר בנגישות, אפשרויות צבע עשירות, שמירה על אחידות בין דפדפנים, תמיכה נרחבת יותר ומניעת "גליצ'ים" של תצוגת אייקון לא נכון. בעקבות הפוסט הזה כתב Ben Frain פוסט תשובה בשם: Seriously, use icon fonts. מאוד מעניין לקרוא את שני הפוסטים ומרשימה בעיניי התהודה שפוסטים מעוררים. אני אישית מעדיפה את ה-svg, יש לי תחושה שהיא יישאר פה והתמיכה בו תלך ותתרחב בניגדול לפונטים, וגם עניין הצבעוניות הוא יתרון גדול בעייני ל-svg.

תודה ללאה ששלחה לי את הקישור לשלושת הפוסטים האלה והכירה לי את הניוז השבועי של SVG 🙂

מקווה להמשיך ולעדכן על נסיונות נוספים ב-svg.

  תגובה אחת ל “סוף סוף SVG”

כתיבת תגובה

האימייל לא יוצג באתר.