בעת יצירת אתר אינטרנט, מעצב האתר צריך לקחת בחשבון ארבע נקודות עיקריות לחשוב על הפריסה והעיצוב החזותי של האינטרנט, ה טקסט, תמונות, צבעים וגופנים עובדים.
מבין ארבע הנקודות הללו, הנקודה שאנו הולכים לתת לה את החשיבות הגדולה ביותר בפוסט זה היא התמונות, שכן אנחנו הולכים לדבר עליה כיצד ליצור קבצי svg שכן חשוב מאוד לקחת בחשבון את איכות התמונות איתן עובדים.
טיפולים עם קבצי SVG, גדל על ידי אנשי מקצוע ולא כל כך מקצוענים בעולם העיצוב.
מהו קובץ SVG?
SVG הוא הקיצור באנגלית של Scalabe Vector Graphics, בספרדית, Scalable Vector Graphics. מדובר על א פורמט פתוח וחינמי בעזרתו ניתן ליצור גרפיקה דו מימדית, דו מימדית.
בניגוד לפורמטים אחרים של תמונה, כגון JPG או PNG, SVG הוא פורמט שניתן להרחבה, לא משנה כמה תרצו להגדיל את גודלו, שכן איכות התמונה תישמר. זהו אחד הפורמטים הנפוצים ביותר בדפי אינטרנט למיקום גרפיקה או תמונות וקטוריות.
מדוע עלינו להשתמש ב-SVG?
בפורמט מסוג זה, תמונות וקטוריות ישמרו על איכות גבוהה, ללא קשר לגודלן ולרזולוציה שלהן. להיפך, תמונות המורכבות ממפות סיביות, המורכבות מפיקסלים, מאבדות איכות אם משנים אותן. פורמט ה-SVG מוגדר על ידי הקלילות והרבגוניות שלו.
נקודה נוספת בעד השימוש בפורמט זה היא גודלו הקטן, כלומר הודות לכך מגביר את מהירות הטעינה של הדפים היכן שהם נמצאים. תמונות אלו נבנות על ידי הדפדפן, מה שעוזר להפחית את העומס והצריכה על השרת.
בנוסף, הם יכולים ליצור תמונות SVG מונפשות בעזרתו ניתן להעניק לאתר שלנו אווירה של קרבה ולמשוך את תשומת הלב של הצופים המבקרים בו.
SVG הוא פורמט פתוח, כלומר, עשוי לעבור שיפורים ועדכונים. בנוסף, ניתן לערוך קבצי SVG בעזרת תוכנות עריכה וקטוריות, למשל Adobe Illustartor מבלי לאבד איכות בתצוגה שלו, ניתן לצפות בו בכל מכשיר. זה גם מאפשר לנו להדפיס אותו מבלי לאבד איכות.
כיצד ליצור בקלות קבצי SVG
אולי הדרך הקלה ביותר ליצור קובצי SVG, אם אתה מכיר אותם, היא באמצעות תוכנת עיצוב גרפי, כגון Illustrator, Corel Draw, בין היתר.
בהתמקדות בתוכנת אילוסטרייטור, כאשר אנו הולכים להשתמש בפורמט SVG, עלינו לקחת בחשבון אם השתמשנו בהדרגות או אפקטים אחרים, כגון האפקט האמנותי, טשטוש, מברשות, פיקסלים וכו'. כפי שהם מסודרים ברסטר כאשר הם נשמרים בפורמט קובץ SVG. מומלץ להשתמש באפקטים של פילטר SVG, כדי להוסיף אפקטים כך שלא ניתן יהיה לרסטר אותם מאוחר יותר.
עצה נוספת שאנו נותנים לך היא להשתמש סמלים ונתיבים פשוטים באיורים לביצועים טובים יותר מהפורמט האמור. הימנע משימוש במברשות עם הרבה מעקב מכיוון שהדבר יוצר עומס נתונים גבוה יותר.
כדי ליצור קובץ SVG בתוכנית זו, הדבר הראשון שעלינו להיות פתוח הוא קנבס ריק שבו נעבוד על הרעיון שלנו.
לאחר סיום העבודה שלנו, מה שאנחנו הולכים לעשות זה ללכת לסרגל הכלים שמוצג מעל התוכנית, ונבחר את האפשרות של file, save as, ומסך מוקפץ יופיע בו הוא אומר לנו לתת לקובץ שלנו שם ולציין את הפורמט שבו נרצה לשמור אותו. זה בסעיף האחרון שבו עלינו לסמן את אפשרות ה-SVG.
בעת בחירת סוג ה-SVG, מופיעה תיבת דו-שיח המציגה לנו אפשרויות שונות שיש לקחת בחשבון.
ככלל, בשדה הראשון המופיע בטבלה מופיע פרופיל SVG 1.1. בהמשך הוא נותן לנו את האפשרות לבחור את המקורות, שבהם הם נותנים לנו ברירת המחדל היא טקסט המסומן ב-SVG וקבוצת משנה כלא. במקרה שלנו, לעבודה זו אין גופנים, אם כן, היה צורך לשנות את אפשרות קבוצות המשנה מאף אחד לכל הפיקטוגרמות.
הסעיף הבא חשוב מאוד, אם נציין את אפשרות הטמעה, התמונות של הקומפוזיציה ישולבו בקובץ, מה שיגרום לו לעלות במשקל אם נשתמש בהרבה תמונות מפת סיביות. אם, לעומת זאת, נסמן את אפשרות הקישור, עלינו להיזהר עם התמונות אם אנו מתכוונים להשתמש בהן באתר, שכן עלינו לכלול את הקבצים של התמונות שלנו, וגם, חשוב מאוד, לשמור עליהן. נָתִיב. היתרון של אפשרות זו הוא שהקבצים ישקלו הרבה פחות.
בסעיף האפשרויות המתקדמות אנו מוצאים את האפשרות ל קוד SVG, אפשרות זו תציין כיצד הקובץ נמצא בפנים, כלומר, הקוד מאחורי העבודה שלנו. אפשרות זו חיונית אם אתה רוצה להוסיף את קובץ ה-SVG שלך, למשל לוורדפרס האישי שלך, אתה רק צריך להעתיק את הקוד ולהוסיף אותו ישירות בעורך ה-HTML של WordPress שלך.
העצה האחרונה שאנו נותנים לך היא שכאשר שומרים בפורמט SVG, זכור שאם אתה עובד עם משטחי יצירה שונים, רק משטח היצירה הפעיל יישמר.
אם אנחנו רוצים ללכת רחוק יותר ולהחיל אפקטים של SVG על האיור שלנו, Illustrator מציעה לנו סט של אפקטים. לשם כך, נצטרך לבחור אובייקט או קבוצה. כדי להחיל אפקט עלינו לבחור את חלון האפקטים, מסנני SVG ולהחיל אותו.
בעת החלת מסנן SVG, תוכנית העיצוב מציגה לנו חלון היכן מופיעה רשימה של מסננים שניתן להחיל, ברגע שנבחר אחד, אילוסטרייטור מראה לנו איך הוא נראה, אבל בגרסה עם רסטר.
כפי שראית, ה פורמט SVG היה מהפכה. בזכות הפוטנציאל והאיכות שלו שהיא מציעה, הופכת את דפי האינטרנט שאנו מוצאים להרבה יותר אטרקטיביים מבלי להקריב את הביצועים, כל עוד הם עושים שימוש נכון בפורמט האמור. SVG הפך לאיחוד המושלם בין עולם העיצוב ופיתוח אתרים.