20 שימושי כלי SVG גרפיקה טובה יותר

SVG היא צובר פופולריות בעיצוב אתרים בימים אלה ואתה יכול להשתמש בכלים כמו Illustrator או Inkscape כדי ליצור גרפיקה SVG. אבל כשמדובר בעיצוב אתרים, אנחנו צריכים תמיד לייעל לתוצאות קלים יותר.

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

מערכת אינטראקטיבית SVG לתאם

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

b64

b64 הוא כלי פשוט לייעל תמונות ואז להפוך אותם לתבנית base64. אתה יכול להוריד את התמונות SVG (פורמטים אחרים כגון JPG ו- PNG עבודה מדי) ואז לתפוס את CSS עם base64 רקע התמונה כתוצאה.

SVGO

SVG המיוצג עשוי להכיל מידע מיותר אשר ניתן להסיר מבלי להשפיע על התוצאה טיוח. אם אתה רוצה להסיר מטא נתונים עורך, הערות או רכיבים מוסתרים, באפשרותך להשתמש ב- SVGO.

אתה יכול intall SVGO דרך npm, $ [sudo] npm install -g svgo או להשתמש בגירסת GUI המציעה גרור ושחרר כדי להפעיל את האופטימיזציה של SVG.

SVG OMG

SVG OMG מסובב את שורת הפקודה של SVGO (הכלי הקודם) לתוך גירסת GUI כי יותר אינטואיטיבי וקל לשימוש. רק לעבור בין הכפתורים כדי להפעיל או לבטל כל תכונה. בסופו של דבר אתה יכול לתפוס את התוצאה כמו קבצי תמונה וקוד גם כן.

SVG עכשיו

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

SVG כדי ממיר PNG

רוצה ל לייצא קבצי SVG לטופס PNG? מבלי לפתוח יישומים כמו Illustrator לעשות זאת? השתמש SVG כדי PNG ממיר כלי כדי לקבל תמונות פלטי בפורמט PNG וגם PNG Base64 נתונים URI אם אתה צריך את זה.

קרקס SVG

אם אתה חושב אנימציות מטעין מגניב, עכשיו אתה יכול ליצור את זה בקלות על ידי ניצול SVG עם קרקס SVG. הכלים מאפשרים לך ליצור מטעין משלך, טווה, או כל דבר דומה באמצעות אנימציה looped. הגדר את 'שחקן', מיקום, גודל, צבע ואחרים מהלוח, ולאחר מכן לייצא כדי לקבל את התוצאות.

SVG ספרייט

SVG Sprite הוא מודול Node.js, אשר מייעל חבורה של קבצי SVG, ו אופה אותם סוגי ספרייט SVG כולל sprites CSS מסורתיים עבור רקע ו ​​/ או תמונות קדמה, ערימות SVG ועוד.

מעין

עם מעין אתה יכול ליצור תמונות Quasicrystal כמו מה שאתה רואה להלן. גנרטור זה הוא ניסיוני, אבל התוצאות בהחלט מגניב. אתה יכול לשחק על ידי שינוי ערך האפשרויות, ולאחר מכן להוריד את התוצאות עם 'שמור SVG' כפתור.

דפוס רגיל

יצירת תבניות עם SVG מעולם לא היה קל יותר או יותר כיף. טען את התמונה שלך, קנה המידה למטה או לשנות את המרווח, לסובב ו recolor עד שאתה מקבל דפוס יפה. אתה יכול לצפות בתצוגה מקדימה את התוצאה לפני ההורדה.

Trianglify גנרטור

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

SVG גרדיאנט

אתה יודע שאתה יכול לעשות gradients עם CSS אבל ידעת שאתה יכול לעשות את אותו הדבר עם SVG? הדרך הקלה ביותר ליצור שיפוע ב SVG היא באמצעות כלי זה. פשוט להיכנס להתחיל ולהפסיק צבע ואז תקבל את הקוד עבור התוצאה שנוצר. נסיגה ב- CSS נכללת גם כן.

ייצוא PSD ל SVG

אם אתה משתמש ב- Photoshop כעורך התמונות עבור העבודה שלך, לפעמים ייתכן שיהיה עליך להמיר את העיצוב שלך על סביבת העבודה Photoshop לתוך SVG, שהוא פורמט לא נתמך ב- Photoshop. הורד את הסקריפט לכלי זה, ולאחר מכן העתק אל Adobe Photoshop / presets / scripts תיקייה.

שנה שם של שם שכבה וקטורית עם תוסף SVG (לדוגמה, שכבה 1 הופכת ל layer1.svg), וכעת תוכל להפעיל את הסקריפט קובץ> סקריפטים> PS ל- SVG.

מסנני SVG

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

SVG מורפיוס

SVG מורפיוס היא ספריית JavaScript המאפשרת לך מורף סמל SVG מצורה אחת לאחרת. ניתן להגדיר את אפקט ההקלה, משך האנימציה במעבר, וכן כיוון הסיבוב.

גנרטור נתיב קליפ

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

Chartist.js

Chartist.js היא ספרייה ליצור תרשימים גמישים להתאמה אישית. הוא משתמש SVG כדי להציג את תרשימים, אשר גם יכול להיות אנימציה באמצעות SMIL. עם ספריה זו, אתה יכול ליצור תרשים קו, תרשים עוגה, תרשים בר סוגים אחרים של תרשימים, ואפילו להוסיף אנימציה להם.

שבץ SVG מקף גנרטור

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

צייר שיטה: עורך SVG פשוט

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

ייצוא פלאש ל SVG אנימציה

למרות שזה לא פופולרי מאוד יותר, יש סיכוי כי כמה מכם יש קשה להרפות Flash. אם כן, אתה יכול להפוך את האנימציה פלאש לתוך SVG כדי לשמור את זה עובד בקנה אחד עם טכנולוגיות חדשות יותר. כלי זה יוצר תוסף ליישום Flash, והוא יכול לעבוד על CS5, CS6 ו- CC.

אתה יכול לייצא לתוך SVG כאשר מדובר צורות, סמלים Bitmaps, קלאסי Motion Tweens, צורה tweens (עבור אחרים, יש הצלחה argable).