עזרי המרה שונים למתכנתי Front End

1. ממיר SVG לCSS

לפעמים רוצים להשתמש בעיצוב וקטורי באתר שלנו, אבל לא תמיד בא לנו ליצור פונט מותאם אישית. יש שיטה קלה יותר – להוסיף בCSS מאפיין תמונת רקע של תמונת SVG.

יתרונות לשימוש בSVG בתוך CSS:

1. זה לא תלוי רזולוציה ויעבוד טוב בכל מסך (כי זה קובץ וקטורי)
2. שוקל מעט מאוד
3. נטען באופן מיידי עם טעינת קובץ הCSS (לעומת אם זה היה בקובץ נפרד שהיה צריך לרדת מהשרת).

טיפ למעצבים: אפשר להעתיק ישירות מתוכנת הגרפיקה (אילוסטרייטור, Adobe XD) ולהדביק ב Insert your SVG וזה יביא קוד CSS אוטומטית 🙂

דוגמא קטנה בקוד CSS:

 CSS
        .read-more {
          border: 0;
          background-color: transparent;
          padding: 1em 1.5em 1.3em;
          background-size: 100%;
          background-position: center;
          background-repeat: no-repeat;
          line-height: 1;
          background-image: url("data:image/svg+xml,%3C!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In --%3E%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='149.5px' height='46.3px' viewBox='0 0 149.5 46.3' style='enable-background:new 0 0 149.5 46.3;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23000000;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cdefs%3E%3C/defs%3E%3Cg%3E%3Cg%3E%3Cpolyline class='st0' points='27.1,42.5 149,42.5 149,0.5 5,0.5 5,29.8 '/%3E%3Cg%3E%3Cpath d='M27.3,46.3c-2.1,0-3.8-1.7-3.8-3.8s1.7-3.8,3.8-3.8c2.1,0,3.8,1.7,3.8,3.8S29.4,46.3,27.3,46.3z'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M0.2,23c0.2-0.1,0.5-0.1,0.7,0.2L5,29.6l4.1-6.5c0.1-0.2,0.5-0.3,0.7-0.2s0.3,0.5,0.2,0.7l-4.5,7.1C5.4,30.9,5.2,31,5,31 s-0.3-0.1-0.4-0.2l-4.5-7.1C0,23.6,0,23.5,0,23.4C0,23.2,0.1,23.1,0.2,23z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
        }

---

2. ממיר קובץ לקוד Base64

אם רוצים להטמיע תמונות או קובצי ווב-פונט בתוך קובץ הCSS עצמו, זה אפשרי.

לשם כך צריך להמיר את התמונה לBase64.

לאתר הזה אפשר להעלות כל קובץ ולקבל את קוד הBase64 באופן מיידי – בצד הלקוח. סופר מהיר.

בנוסף, כעזר, הם שמו בשאלות נפוצות קודים שימושיים שאפשר פשוט להעתיק ולהשתמש.

---

3. ממיר קוד ל־Base64

3. ממיר קוד ל-Base64 ולהיפך

אם רוצים להמיר כל סוג של טקסט לBase64, כמו קוד של CSS, קוד של SVG, או כל דבר אחר, אפשר לדאוג לזה בעזרת האתר הזה.

הוא מצליח לעשות שינוי באופן מיידי בעזרת JavaScript.