محرر SVG عبر الإنترنت

محرر SVG احترافي يعمل بالكامل في متصفحك

محرر SVG من Tools 4 All تطبيق رسوميات متجهة كامل يفتح فورًا دون تنزيل أو حساب أو رفع. استخدمه لرسم الشعارات والأيقونات والرسوم التوضيحية والمخططات وأصول الواجهات، أو لتنظيف ملفات SVG لديك وضبطها بدقة. وهو مبني حول صيغة SVG نفسها، لذا فالملف الذي تصدّره هو المستند نفسه الذي حررته: بلا صيغة مملوكة، بلا تحويل خفي.

ما يمكنك فعله

• ارسم بدقة: أداة القلم بمنحنيات Bézier، وقلم رصاص حر مع التنعيم، ومستطيلات بزوايا مستقلة مستديرة أو مشطوفة أو مقلوبة، وقطوع ناقصة، وخطوط، وفرشاة كتلية، وممحاة، وسكين، ومقص، وأشكال قابلة للتحرير: مضلعات ونجوم ومثلثات وصلبان وإطارات وحلقات وقطاعات وأهلّة وأسهم وفقاعات كلام وتروس وقلوب وغيوم وزهور ولوالب، ونص.
• حرّر المسارات عقدة بعقدة: حرّك العقد والمقابض، وحوّل بين العقد الزاوية والناعمة والمتماثلة، وأضف العقد واحذفها، واربط المسارات واكسرها، واثنِ المقاطع مباشرة، وألصق المقابض بالمماسات.
• دمج الأشكال: الاتحاد والطرح والتقاطع والاستبعاد والتقسيم، إضافة إلى تحويل الحد إلى مخطط وإزاحة المسار والتبسيط والعكس، وكلها يحسبها محرك هندسي خاص بنا يحافظ على المنحنيات في عامل خلفي.
• نسّق كل شيء: ألوان مصمتة، وتدرجات خطية وشعاعية بمقابض على اللوحة، ونقوش، وعتامة لكل تعبئة ولكل حد، وتقطيع، ونهايات، ووصلات، وعلامات رؤوس الأسهم، وأوضاع المزج، وتأثيرات التمويه والظل، ومسارات القص والأقنعة.
• ابقَ منظمًا: لوحة طبقات مع إعادة الترتيب بالسحب وإعادة التسمية والتداخل، والقفل والإخفاء، والتجميع وفك التجميع، والمحاذاة والتوزيع نسبةً إلى التحديد أو لوح الرسم أو كائن مرجعي، وعينات ألوان المستند والرموز القابلة لإعادة الاستخدام.
• اعمل كالمحترفين: أدلة ذكية مع تسميات المسافات وتلميحات التباعد المتساوي، والالتصاق بالشبكة والبكسلات وأدلة المسطرة والعقد والمسارات، وحقول رقمية لـ X/Y/W/H/التدوير، وتراجع غير محدود، واختصارات على طريقة Figma وIllustrator.
• الشيفرة والتصدير: عرض شيفرة SVG ثنائي الاتجاه، وتصدير SVG محسّن مع عرض الحجم، وPNG/JPEG/WebP بأي مقياس، والنسخ كـ SVG أو data URI أو React (JSX أو TSX) أو Tailwind SVG أو خلفية CSS.
• مصمم لإنتاج الويب: ألوان المستند مع الاستبدال بنقرة واحدة والتحويل إلى currentColor، وتحويل النص إلى مخططات، وتحويل الحد إلى مخطط، وتسطيح التحويلات وفك التجميع، وملاءمة اللوحة للمحتوى، وتبسيط المسارات المشوشة.
• مساحة عمل حقيقية: عدة رسومات في تبويبات، لكل منها سجل تراجع خاص، وقوائم قصيرة بقوائم فرعية، ولوحة جانبية قابلة للطي (Ctrl/⌘+B)، وتحرير بملء الشاشة على الهواتف والحواسيب.

لماذا يهم محرر أصلي لـ SVG

تتعامل كثير من أدوات التصميم مع SVG كصيغة تصدير: ترسم في نموذجها الخاص، ويُولَّد SVG في النهاية. ينجح ذلك مع الأيقونات البسيطة. لكنه يفشل عندما تحتاج إلى تحرير ملف موجود، أو الحفاظ على المعرّفات التي تعتمد عليها CSS أو JavaScript، أو فهم سبب كون الملف أكبر بعشر مرات مما يجب. يعمل هذا المحرر على مستند SVG مباشرة. تبقى المجموعات مجموعات، والتدرجات تدرجات، ويبقى <symbol> المستخدم خمس مرات رمزًا واحدًا. وعندما تعيد تسمية طبقة، فأنت تعيّن id العنصر.

سريع مع الملفات الكبيرة

كانت السرعة هدفًا في التصميم منذ السطر الأول من الشيفرة. يعرض متصفحك الرسم أصليًا داخل طبقة معزولة. وتُرسم مقابض التحديد ومخططات التمرير والأدلة على طبقة علوية منفصلة، فلا يلمس تحريك الماوس مستندك أبدًا. ويجد فهرس مكاني (R-tree) ما تحت المؤشر في ميكروثوانٍ، حتى مع عشرات الآلاف من الأشكال. وفي المستندات الثقيلة، يُسلَّم التحريك والتكبير إلى مُركِّب GPU، وتُعاد معالجة المتجهات بحدة عند التوقف. ويعمل الجهد المكلف مثل العمليات المنطقية وإزاحة المسارات وتحسين SVG في Web Worker، لتبقى الواجهة سريعة الاستجابة.

أدوات دقيقة للعمل المتجهي

استخدم أداة القلم للنقر على الزوايا وسحب المنحنيات الناعمة. اضغط مطولًا على Shift للحفاظ على زوايا 45° وAlt لكسر مقبض. وبأداة العقد يمكنك سحب مقطع لثنيه، أو النقر نقرًا مزدوجًا لإضافة عقدة، أو تحديد عدة عقد ومحاذاتها. تُظهر الأدلة الذكية متى يصطف كائن مع حواف جيرانه أو مراكزهم، ومتى يتساوى التباعد بين الكائنات. ويمكنك أيضًا سحب الأدلة من المساطر. وللقيم الدقيقة، اكتب X وY والعرض والارتفاع والتدوير في لوحة التصميم. تقبل الحقول عمليات حسابية مثل 120+16 أو 200/3.

تصديرات نظيفة وصغيرة

كثيرًا ما تترك المحررات بيانات وصفية وتعريفات غير مستخدمة ومجموعات زائدة وأرقامًا مفرطة الدقة في الملفات التي تحفظها. يشغّل مربع حوار التصدير مُحسِّنًا على طريقة SVGO في الخلفية. يقرّب الأرقام إلى الدقة التي تختارها، ويحوّل بيانات المسارات إلى أقصر صيغة، ويزيل البيانات الوصفية للمحرر والتعريفات غير المستخدمة، ويقصّر المعرّفات والألوان، ويطوي المجموعات عديمة الفائدة. يمكن إيقاف كل تحسين، ويعرض مربع الحوار حجم الملف قبل وبعد. وللإخراج النقطي، اختر PNG أو JPEG أو WebP بمقياس 1× أو 2× أو 4× أو بحجم دقيق بالبكسل، مع خلفية شفافة أو بدونها.

مصمم لإنتاج الويب

تحتاج ملفات SVG المستخدمة في المواقع والتطبيقات إلى أشياء مختلفة عن أعمال الطباعة. تعرض قائمة ألوان المستند كل لون يستخدمه الملف: غيّر أحدها فيتبعه كل ما يشاركه، أو حوّله إلى currentColor لتأخذ أيقونة React أو Tailwind لونها من CSS. غالبًا ما تحمل الملفات المستوردة مجموعات وتحويلات متداخلة تصعّب تحرير المسارات: يدمج "تسطيح التحويلات وفك التجميع" هذه التحويلات في الإحداثيات بخطوة واحدة، ويقصّ "الملاءمة للمحتوى" مربع العرض viewBox على الرسم، بما في ذلك الحدود. ويحوّل "النص إلى مخططات" و"الحد إلى مخطط" الخطوط وسماكات الحدود إلى مسارات عادية تبدو متطابقة في كل مكان، ويزيل "التبسيط" مئات النقاط من الأشكال المتتبَّعة أو المرسومة يدويًا.

تبقى ملفاتك على جهازك

لا يوجد خادم خلف المحرر. فتح ملف يقرأه من قرصك إلى الصفحة، والتصدير يولّد الملف على جهازك. يكتب الحفظ التلقائي إلى تخزين IndexedDB الخاص بمتصفحك، والذي يحتفظ أيضًا بقائمة ملفاتك الأخيرة. إن أغلقت التبويب بالخطأ، يُستعاد مستندك الأخير في زيارتك التالية.

استكشف المزيد من أدوات الصور