محرر SVG
الأشكال والكود جنبًا إلى جنب
الصق كود SVG أو ابدأ بشكل. يتيح لك محرر SVG هذا (SVG editor) تحريكه وتغيير تنسيقه على لوحة مباشرة، ثم نسخ الكود النظيف أو تنزيله. بلا حساب، وبلا رفع، ولا شيء على خادم.
- مجانيالسعر
- خمسةالأشكال
- SVG نظيفالناتج
- لا شيءالرفع
محرر SVG
الصق أو ارسم أشكالًا، حرّكها وغيّر حجمها، ثم احفظ كودًا نظيفًا
لا شيء محدد. انقر شكلًا على اللوحة أو في قائمة الطبقات.
جاهز. حُمّل رسم تجريبي. الصق كود SVG الخاص بك أدناه واضغط حمّل الكود.
ماذا يفعل محرر SVG
يتيح لك محرر SVG هذا العمل على الرسوم المتجهة داخل متصفحك. تلصق كود SVG أو تبدأ بشكل بسيط. ثم تحرّك الأجزاء وتغيّر حجمها وتنسيقها على لوحة مباشرة. ولأن كل شيء يجري على جهازك، لا يغادر الكود الصفحة أبدًا. كما لا تُحفظ أي نسخة في مكان آخر.
يتم تعديل الرسم بخطوات قليلة. أولًا الصق كود SVG أو أضف شكلًا، مثل مستطيل أو دائرة أو خط أو نص. ثم انقر جزءًا لتحديده واسحبه، أو اسحب نقطة زاويته لتغيير حجمه. كذلك تضبط التعبئة والحد، وتكتب أرقامًا دقيقة، وتعيد ترتيب الطبقات ليظهر الجزء الصحيح في الأعلى.
لا تحتاج إلى حساب ولا توجد خطوة رفع، لذلك يكون الرسم جاهزًا فورًا. كل شيء يتحدث أثناء التعديل، أي أنك ترى النتيجة النهائية قبل الحفظ. وعندما تعجبك، انسخ الكود أو نزّله كملف SVG. ثم ضعه في صفحة أو مجموعة أيقونات أو ملف تصميم.
يناسب محرر SVG هذا كل من يعمل بالرسوم المتجهة. في الواقع، فمثلًا ينظف المطورون أيقونة، ويعدّل المصممون لون شعار، ويضبط الكتّاب مخططًا صغيرًا دون برنامج ثقيل. ولأن النتيجة نص SVG، تبقى حادة بأي حجم. كما تبقى مقروءة عند لصقها في مشروع.
رسم واحد، أشكال وكود
تُظهر الصورة أدناه لوحة الرسم على اليسار. وعلى اليمين كود SVG النظيف الذي يحتفظ به المحرر لها.
انقر شكلًا على اللوحة، فيحدده إطار منقط. حرّكه أو غيّر تنسيقه، فيتحدث الكود المقابل فورًا. وبهذا يتفق الاثنان دائمًا.
حدّد، واسحب، ثم اضبط
انقر شكلًا على اللوحة أو في قائمة الطبقات. يحدده إطار منقط، وتغيّر نقطة الزاوية حجم المستطيل أو الدائرة أو القطع الناقص أو الخط أو النص أو الصورة. أما المسارات والمجموعات فتتحرك بالسحب، ويُغيَّر حجمها من الكود.
تضبط اللوحة الجانبية التعبئة والحد والشفافية. وتحتها لكل سمة من سمات الشكل حقل خاص، فتكتب رقمًا دقيقًا. كذلك تحرّك أسهم لوحة المفاتيح الشكل المحدد، ويعود زر تراجع خلال تغييراتك الأخيرة.
شرح بالفيديو: محرر SVG
يشرح فيديو قصير كل خطوة. ثم اختر لغتك أدناه، وشغّل الترجمة النصية إن أردت.
كيف تعدّل ملف SVG
ست خطوات، ولا يغادر الكود التبويب أبدًا.
- 1
الصق الكود أو أضف شكلًا
الصق كود SVG واضغط حمّل الكود. أو ابدأ بمستطيل أو دائرة أو قطع ناقص أو خط أو نص إذا بدأت من الصفر.
- 2
حدّد جزءًا على اللوحة
انقر شكلًا لاختياره. في الواقع، يظهر إطار منقط ونقطة في الزاوية، فتعرف دائمًا أي جزء نشط.
- 3
حرّكه وغيّر حجمه
اسحب الشكل إلى مكان جديد، أو اسحب نقطة الزاوية لتغيير حجمه. واضغط Shift لتحتفظ بنسب المستطيل أو القطع الناقص أو الصورة.
- 4
غيّر التعبئة والحد
اختر لون تعبئة، وأضف حدًا، وغيّر عرضه واضبط الشفافية. وتُعاد رسم اللوحة مع كل قيمة.
- 5
أعد ترتيب الطبقات
استخدم إلى الأمام وإلى الخلف لتحريك الشكل لأعلى أو لأسفل في كومة الطبقات. وبهذا يُقرأ الرسم كما تريد.
- 6
انسخ النتيجة أو نزّلها
انسخ الكود النظيف إلى الحافظة أو احفظه كملف SVG. لا يُرسل شيء إلى خادم، لذا يبقى الكود خاصًا.
لماذا تعدّل SVG داخل المتصفح
ثلاثة أسباب تجعل محرر المتصفح أفضل من برنامج تصميم ثقيل لهذه المهمة.
شاهد الشكل والكود معًا
SVG رسم متجه مكتوب كنص، فيسهل تعديله باليد لكن يصعب تخيله. ولأن الأرقام تصف الأشكال، فإن تغييرًا صغيرًا في قيمة يحرّك شكلًا كاملًا. وعمليًا، يعرض هذا المحرر الرسم والأرقام معًا. وبهذا تغيّر قيمة وترى النتيجة فورًا.
يبقى الكود خاصًا
يتجاوز محرر SVG هذا خطوة الرفع المعتادة. كثير من أدوات الرسم المتجه ترسل ملفك إلى خادم وتعيد لك رابطًا. أما هنا فيُصنع الرسم على جهازك. لذلك تبقى الأيقونة الخاصة أو الشعار غير المنشور خاصًا، وتعدّل مسودة العميل دون مخاطرة.
النتيجة SVG نظيف وحاد
النتيجة مهمة بقدر التعديل. ولأنها نص SVG، تدخل صفحة ويب أو برنامج تصميم دون إضافة. وبالتالي تحصل على ملف حاد بأي حجم، سريع التحميل، وسهل القراءة للمطور.
كيف يعمل المحرر
ثلاثة أمور تحدد النتيجة. ومن المفيد معرفة كل منها قبل الحفظ.
- كل نقرة تصيب شكلًا يقرأ المحرر كود SVG ويرسمه ويربط كل نقرة بالشكل تحت المؤشر. ولأن الرسم أشكال لها إحداثيات، فإن تحريك جزء يغيّر أرقامه فقط. ويبقى الباقي كما هو. كذلك تعرض اللوحة سمات الشكل المحدد، فتكتب قيمة دقيقة عندما لا يكفي السحب.
- ترتيب الطبقات يحدد ما يظهر ترتيب الطبقات يحدد ما يكون في الأعلى. يرسم SVG الأشكال بترتيب ظهورها، لذا يغطي الشكل اللاحق ما قبله. وعليه فإن تحريك جزء لأعلى أو لأسفل يغيّر ما يُرى أولًا. وقد يصلح تغيير بسيط في الترتيب حافة مخفية أو نصًا مغطى.
- يبقى التصدير نظيفًا وسهل النقل يحافظ التصدير على نظافة الكود. يكتب المحرر كودًا مرتبًا أثناء العمل، فتكون النسخة SVG مقروءًا بدل سطر طويل. كما يحتوي الملف على أشكالك فقط، فيفتح في أي متصفح دون شيء آخر.
أخطاء شائعة في تعديل SVG
كل خطأ منها يجعل الرسم يبدو صحيحًا لكنه يعمل خطأ، ويُكتشف متأخرًا.
فقدان viewBox
دون viewBox يُقص الرسم أو يتغير حجمه بشكل غريب في الصفحة. كذلك، لذا احتفظ بـ viewBox، وغيّر العرض والارتفاع فقط لحجم ثابت.
مط محور واحد فقط
الشكل الممطوط من جهة يبدو مكسورًا. ولأن المتجه يتمدد بحرية، اضغط Shift أثناء تغيير الحجم ليحتفظ الشكل بنسبه.
ترك تعبئة على شكل محيطي
الشكل المقصود كمحيط يملأ مساحة كاملة إذا كانت له تعبئة. لذا اختر بلا تعبئة عندما يجب أن يبقى الشكل محيطًا.
تعديل نسخة وفقدان الأصل
يعمل المحرر على الكود الذي تلصقه، لذا يبقى الملف الأصلي آمنًا. ومع ذلك احتفظ بنسخة احتياطية لتقارن بين النسختين.
نسيان عرض الحد
الحد الرفيع جدًا يختفي على شاشة عالية الدقة. ولأن الرسم المتجه يكبر، افحص عرض الحد بحجم كبير قبل تسليم الملف.
نسيان وصف الإتاحة
الصورة الزخرفية لا تحتاج إلى عنوان، لكن الصورة ذات المعنى تحتاج. لذا أضف عنصر title قصيرًا في الكود، فيستطيع قارئ الشاشة تسمية الرسم.
الأسئلة الشائعة عن محرر SVG
هل يرفع محرر SVG ملفي؟
لا. يبقى الرسم كله داخل متصفحك. لذلك لا يصل الكود إلى أي خادم، لأن المحرر لا يحتاج إليه لتعديل الرسم.
ما SVG؟
SVG اختصار Scalable Vector Graphics، وهو تنسيق نصي يصف الأشكال بالأرقام بدل البكسل. ولأنه متجه، يبقى حادًا بأي حجم. كما يُقرأ ككود، فيسهل تعديله ويكون صغير الحجم.
هل يجب أن أرفع ملف SVG؟
لا. يأخذ المحرر الكود الملصق، لذا افتح ملفك وانسخ نص SVG ثم الصقه. بعد ذلك تعدّل على اللوحة، ويبقى الملف على جهازك كما هو.
ما الأشكال التي أضيفها؟
يضيف المحرر مستطيلًا ودائرة وقطعًا ناقصًا وخطًا ونصًا. وتغطي هذه معظم الأيقونات والمخططات، فتصنع رسمًا بسيطًا دون برنامج تصميم كامل.
هل أعدّل مسار شكل معقد؟
نعم. تعرض اللوحة الجانبية السمات الخام، فتعدّل المسار بيدك. وعمليًا، استخدم اللوحة للتحريك السريع، وحقل السمة عندما تحتاج إلى قيمة دقيقة.
أيضًا، هل أغيّر التعبئة والحد؟
نعم. يكتب المحرر الألوان في الكود، فتضبط التعبئة ولون الحد وعرضه لكل شكل. كذلك تختار بلا تعبئة، وهذا مفيد لأيقونة محيطية.
هل يبقي المحرر الكود نظيفًا؟
نعم. يكتب سمات مرتبة أثناء التعديل، فيبقى الكود المنسوخ مقروءًا بدل سطر طويل. لكنه لا يجلب ملفات أو سكربتات خارجية، لذا يحتوي التصدير على ما رسمته فقط.
هل محرر SVG مجاني؟
نعم، بالكامل. لا حساب ولا فترة تجريبية ولا علامة مائية. كما أن العمل يجري في متصفحك، فلا توجد تكلفة خادم. لذلك تبقى كل ميزة مجانية.
هل يعمل دون اتصال؟
نعم. بعد تحميل الصفحة يجري كل تعديل محليًا. لذلك يمكنك قطع الاتصال ويستمر المحرر في العمل، لأنه لا يتصل بأي خادم.
هل أنزّل النتيجة كملف؟
نعم. النتيجة نص SVG، فتنسخها إلى الحافظة أو تحفظها كملف. والملف المحفوظ يفتح في أي متصفح ويدخل مباشرة في مشروع ويب.
هل أحوّل SVG إلى PNG؟
ليس في هذه الصفحة. في الواقع، هذه الأداة تعدّل كودًا متجهًا، أما الصور النقطية فمهمة محوّل. بدلًا من ذلك استخدم صفحة SVG إلى PNG عندما تحتاج إلى صورة بحجم ثابت.
هل أعدّل شعارًا؟
نعم، إذا كان لديك كود SVG. الشعار مكوّن من أشكال، فتحرّك أجزاءه وتغيّر ألوانها وتعدّل أرقامها. لكن هذا المحرر لا يغيّر شعارًا وصل كصورة مسطحة، لأنه لا يحمل بيانات أشكال.
هل أضبط حجم لوحة العمل؟
نعم. تحتوي الحقول تحت اللوحة على العرض والارتفاع وviewBox، فتغيّرها هناك. وعمليًا، احتفظ بـ viewBox وغيّر الحجم فقط عندما تحتاج إلى حجم ثابت.
هل يحفظ المحرر رسمي؟
لا. لا يحتفظ أي خادم أو تخزين محلي بشيء، فلا تبقى نسخة بعد الجلسة. وعند إغلاق التبويب يختفي الرسم. لذلك انسخ النتيجة أو نزّلها قبل المغادرة.
هل أستخدم المحرر على الهاتف؟
نعم. تتكيف الصفحة مع الشاشات الصغيرة، فتعدّل على الهاتف أو الجهاز اللوحي. لكن السحب الدقيق أسهل على الحاسوب، لذا يناسب الهاتف تغيير لون أو حجم بسرعة.
هل أتراجع عن تغيير؟
نعم. يحتفظ المحرر بسجل قصير، فيعيدك زر تراجع عندما تخطئ حركة. كذلك، والسجل يشمل الخطوات الأخيرة من هذه الجلسة فقط.
هل SVG آمن للصق في صفحة؟
يعتمد ذلك على الملف. بعض ملفات SVG تحمل سكربتات أو أحداثًا أو روابط خارجية، لذا يزيل المحرر هذه الأجزاء ويحتفظ بالرسم. ثم يخبرك بعدد الأجزاء التي أزالها.
هل أعيد ترتيب الأشكال؟
نعم. يرسم SVG الأشكال بترتيبها، لذا فإن تحريك جزء لأعلى أو لأسفل في قائمة الطبقات يغيّر ما يغطي ماذا. ضع الخلفية أولًا والنصوص أخيرًا، فيبقى كل شيء ظاهرًا.
هل يضيف المحرر علامة مائية؟
لا. التصدير نسخة نظيفة من رسمك ككود SVG. لا يضيف المحرر شيئًا ولا علامة، لأنه يكتب الأشكال والألوان والنص الذي تضعه فقط.
هل أجمع الأشكال في مجموعة؟
المجموعة الموجودة في ملفك تبقى مجموعة. تظهر كطبقة واحدة، فتحددها وتحرّكها وتغيّر لونها كقطعة واحدة. لكن هذا المحرر لا ينشئ مجموعات جديدة، لذا ضع الأشكال داخل وسم g في الكود عندما تحتاج إلى ذلك.
هل يتتبعني المحرر أو يقرأ الكود؟
لا. لا يُرسل الكود إلى أي مكان، ولا يقرؤه أي سكربت تحليلات. لذلك يُبنى الرسم على جهازك، لأن لا شيء من ملفك يغادر الصفحة.
أيضًا، هل أستخدم النتيجة في موقع؟
نعم. النتيجة SVG خالص، فتدخل الصفحة كصورة أو ككود مضمّن. ويمكن تنسيق SVG المضمّن وتحريكه بـ CSS، بينما يجعل وسم الصورة كود الصفحة أقصر.
أدوات أخرى للصور والرسوم المتجهة
صفحات تقود إليها هذه المهمة عادة.
صدّر الرسم المتجه النهائي كصورة بحجم ثابت.
افتح الأداة ←أيضًا، حوّل بين PNG وJPG وWebP وغيرها.
افتح الأداة ←ضمّن صورة صغيرة مباشرة في الكود.
افتح الأداة ←ابنِ لوحة ألوان للتعبئة والحدود.
افتح الأداة ←حوّل صورة إلى فن نصي من الحروف.
افتح الأداة ←
عدّل أول ملف SVG لك الآن
افتح محرر SVG، والصق الكود أو أضف شكلًا، ثم حرّكه وغيّر تنسيقه على اللوحة. كذلك، وعندما يصبح جيدًا، انسخ الكود النظيف أو نزّل الملف. لا شيء يغادر جهازك.