20 أدوات SVG مفيدة لتحسين الرسومات

تكتسب SVG شعبية في تصميم الويب هذه الأيام ويمكنك استخدام أدوات مثل Illustrator أو Inkscape لإنشاء رسومات SVG. ولكن عندما يتعلق الأمر بتصميم الويب ، يجب أن نحسن دائمًا النتائج الأقل وضوحًا.

هنا ال 20 أداة يمكنك استخدامها للعمل مع SVG بسرعة وكفاءة. لدينا معظمها أدوات عبر الإنترنت ، يمكن أن تساعد في التحسين والتحويل وصنع الأنماط والمزيد.

نظام تنسيق SVG التفاعلي

عندما تعمل مع SVG ، لا يمكنك ترك إحداثيته. هذه أداة تفاعلية رائعة من Sara Souiden ، لمساعدتك تعرف على كيفية تنسيق SVG للعمل. باستخدام viewBox و الإحتفاظ بنسبة العرض للإرتفاع على 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 (الأداة السابقة) إلى إصدار واجهة المستخدم الرسومية هذا أكثر بديهية وسهلة الاستخدام. مجرد تبديل الأزرار لتنشيط أو إلغاء تنشيط كل ميزة. في النهاية ، يمكنك الحصول على النتيجة كملفات صور ورمز أيضًا.

SVG الآن

عندما تعمل على Illustrator ، تحتوي SVG المصدرة على بعض المعلومات غير الضرورية. مع هذه الأداة سوف الحصول على الإصدار الأمثل من SVG الخاص بك المصدّر مباشرة من مساحة عمل Illustrator الخاصة بك. تضيف هذه الأداة لوحة تحتوي على بعض الخيارات لتحسين SVG. يمكنك الحصول على SVG Now من صفحة إضافات Creative Cloud.

SVG لتحويل PNG

اريد ان تصدير ملفات SVG إلى نموذج PNG? بدون فتح تطبيقات مثل Illustrator للقيام بذلك؟ استخدم أداة SVG to PNG Converter هذه للحصول على مخرجات الصور بتنسيق PNG وأيضًا بيانات URI الخاصة بتنسيق PNG Base64 إذا كنت في حاجة إليها.

SVG Circus

إذا كنت تعتقد أن الرسوم المتحركة للمحمول رائعة ، يمكنك الآن إنشاؤها بسهولة باستخدام SVG معها SVG Circus. الأدوات تمكنك من اصنع اللودر الخاص بك ، الدوار ، أو أي شيء مشابه باستخدام الرسوم المتحركة ذات الحلقات. اضبط "الفاعل" والموضع والحجم واللون وغيرهم من اللوحة ، ثم قم بالتصدير للحصول على النتائج.

SVG العفريت

SVG Sprite هي وحدة Node.js ، والتي تعمل على تحسينها مجموعة من ملفات SVG, و يخبئهم إلى أنواع SVG sprite بما في ذلك العفاريت التقليدية CSS للخلفية و / أو الصور الأمامية ، ومجموعات SVG والمزيد.

شبه

مع شبه يمكنك توليد الصور Quasicrystal مثل ما تراه أدناه. هذا المولد تجريبي ، لكن النتائج رائعة بالتأكيد. يمكنك التنقل من خلال تغيير قيمة الخيارات ، ثم تنزيل النتائج باستخدام الزر "حفظ SVG".

نمط عادي

إنشاء أنماط باستخدام SVG لم يكن أسهل أو أكثر متعة. قم بتحميل صورتك ، قم بتخفيض أو تغيير المسافات ، تدوير وإعادة تلوين حتى تحصل على نمط جميل. يمكنك معاينة النتيجة قبل تنزيلها.

مولد التثليث

إنشاء أنماط هندسية جميلة SVG مع مولد التثليث. يمكنك ضبط لون عشوائي / متغير ، حجم التفاصيل ، واختيار لوحة ألوان للعمل معها. هذه الأداة هي نسخة من واجهة المستخدم الرسومية Trianglify.

SVG التدرج

هل تعلم أنه يمكنك إجراء تدرجات باستخدام CSS ولكن هل تعلم أنه يمكنك فعل الشيء نفسه باستخدام SVG؟ أسهل طريقة ل توليد التدرج على SVG باستخدام هذه الأداة. فقط أدخل لون البداية والتوقف ثم ستحصل على رمز النتيجة التي تم إنشاؤها. كما تم تضمين تراجع على CSS.

تصدير PSD إلى SVG

إذا كنت تستخدم Photoshop كمحرر صور لعملك ، فقد تحتاج في بعض الأحيان إلى ذلك قم بتحويل التصميم الخاص بك على مساحة عمل Photoshop إلى SVG, وهو تنسيق غير مدعوم في برنامج فوتوشوب. قم بتنزيل البرنامج النصي إلى هذه الأداة ، ثم انسخ إلى أدوبي فوتوشوب / المسبقة / البرامج النصية مجلد.

إعادة تسمية اسم طبقة المتجه بامتداد SVG (على سبيل المثال ، طبقة 1 تصبح layer1.svg) ، ويمكنك الآن تشغيل البرنامج النصي من ملف> نصوص> PS إلى SVG.

مرشحات SVG

هل تعلم أنه باستخدام SVG ، يمكنك إضافة تأثيرات مثل تدرج اللون ، التشبع ، التمويه ، تراكب اللون الخطي ، وغيرها الكثير للصور؟ هنا هي أداة ذلك تصور هذه الآثار ، ثم يمنحك مقتطفًا لجعلها سهلة ل تضمين التأثير في مشروعك.

SVG مورفيوس

SVG مورفيوس هي مكتبة جافا سكريبت التي تسمح لك تحويل رمز SVG من شكل إلى آخر. يمكنك ضبط تأثير التسهيل ، ومدة الرسوم المتحركة الانتقالية ، وكذلك اتجاه الدوران.

مولد مسار كليب

يسمح لك SVG بالنقر فوق مقطع الصورة باستخدام Shape. هذا سهل للغاية إذا كان الشكل في شكل مربع أو دائرة. ولكن ماذا إذا كان الشكل ذو الكثير من النقاط أو شكل مضلع? هذا هو المكان الذي تحتاج فيه إلى أداة Clip Path Generator.

Chartist.js

Chartist.js هي مكتبة ل إنشاء مخططات استجابة عالية للتخصيص. يستخدم SVG لعرض المخططات ، والتي يمكن أيضًا تحريكها باستخدام SMIL. باستخدام هذه المكتبة ، يمكنك إنشاء مخطط خطي ، مخطط دائري ، مخطط شريطي وأنواع أخرى من المخططات ، وحتى إضافة رسوم متحركة إليها.

SVG السكتة الدماغية مولد اندفاعة

هذه هي أداة بسيطة ل توليد خطوط متقطع باستخدام SVG السكتة الدماغية dasharray. اختر أولاً نوعًا واحدًا من القائمة ، ثم قم بتخصيصه من حيث العرض أو الارتفاع أو الدوران أو اللون. بعد ذلك ، يمكنك الحصول على كود HTML و CSS لتطبيق خط الشرطة هذا في مشروعك.

ارسم الأسلوب: محرر SVG بسيط

الطريقة هي محرر SVG على شبكة الإنترنت ، مع واجهة سهلة الاستخدام تأتي مع أدوات على جانبي اللوحة القماشية. يمكنك رسم خطوط أو أشكال أو إدخال نص أو استخدام أشكال مدمجة ، ثم تحرير خصائص الكائنات المرسومة. قم بتصدير الصورة بتنسيق SVG (يأتي أيضًا بتنسيق SVG base64) أو احفظ مباشرة بتنسيق PNG.

تصدير Flash إلى SVG متحركة

على الرغم من أنه لم يعد مشهورًا للغاية ، إلا أن هناك احتمالًا في أن يجد البعض منك صعوبة في التخلي عن Flash. إذا كان الأمر كذلك ، يمكنك ذلك قم بتحويل الرسوم المتحركة الفلاش إلى SVG لإبقائها متوافقة مع التقنيات الحديثة. تشكل هذه الأداة امتدادًا لتطبيق Flash ، ويمكن أن تعمل على CS5 و CS6 و CC.

يمكنك التصدير إلى SVG عندما يتعلق الأمر Shapes ، رموز الصور النقطية ، Classic Motion Tweens ، أشكال مراهقات (بالنسبة للآخرين ، هناك نجاح قابل للنقاش).