Softonic

تغيير حجم SVG

خطوة 1 / 2
التالي

صيغة SVG صيغة متجهية، لذا فهي مستقلة عن الدقة وتبقى حادّة كالموسى في أي حجم. «تغيير حجم» ملف SVG لا يحوّله إلى نقاط (raster) ولا يغيّر الرسم: تكتفي هذه الأداة بتحديد قيمتي width وheight جديدتين بالبكسل على العنصر الجذر <svg>، أي حجم العرض المُعلَن له. يبقى viewBox والمسارات وكل إحداثي كما هي تمامًا، فيحافظ الرسم على نسبه ولا يفقد أي جودة. ألصِق الشيفرة، وحدّد العرض والارتفاع، وعايِن النتيجة، ثم انسخها أو نزّلها.

كيفية تغيير حجم ملف SVG

  1. 1

    ألصِق ملف SVG

    ألصِق الشيفرة الكاملة `<svg>...</svg>` في مربع النص.

  2. 2

    حدّد العرض والارتفاع

    أدخِل العرض والارتفاع الجديدين بالبكسل.

  3. 3

    معاينة حية

    تعيد الأداة كتابة `width` و`height` على العنصر الجذر `<svg>` (أو تضيفهما إذا كانا مفقودين) وتعرض النتيجة فورًا.

  4. 4

    انسخ أو نزّل

    انسخ الشيفرة المحدَّثة إلى الحافظة أو احفظها كملف `.svg`.

حجم العرض مقابل viewBox

لملف SVG حجم عرض (width/height) ونظام إحداثيات خاص به (viewBox).

<svg width="200" height="200" viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="40" />
</svg>

حجم ملف SVG هذا على الشاشة 200 × 200 بكسل، بينما تمتد إحداثياته الداخلية من 0 إلى 100. تملأ الدائرة ذات r="40" نحو 80٪ من الـ viewBox، فتُعرَض بعرض 160 بكسل تقريبًا. تغيّر هذه الأداة width وheight فقط، أي حجم العرض المُعلَن. ولا تمسّ viewBox ولا الإحداثيات، ولهذا بالضبط يحافظ الرسم على نسبه ويبقى حادًّا: أنت تطلب من المتصفح رسم الصورة نفسها بحجم مختلف، لا أن يعيد رسمها.

لماذا قد يبدو ملف SVG كما هو بعد تغيير الحجم

إذا وُضِع ملف SVG بشيء مثل <img src="icon.svg" width="500"> أو حُدِّد حجمه عبر CSS، فإن الصفحة المحيطة هي التي تتحكم في حجم العرض وتتجاوز قيمتي width/height داخل الملف. في هذه الحالة، غيّر الحجم في المكان الذي يُستخدَم فيه SVG (في <img> أو في CSS أو في الحاوية)، لا داخل الشيفرة فقط.

تبقى الخطوط والنص حادّة

بما أنه لا يجري تحويل أي شيء إلى نقاط، يبقى النص نصًّا متجهيًا حقيقيًا وتبقى الخطوط ناعمة في أي حجم. تُعرَّف سماكة الخطوط في نظام الإحداثيات، لذا تتحجّم مع الرسم. وإذا أردت أن يحتفظ خط بالسماكة البصرية نفسها بصرف النظر عن الحجم، أضِف vector-effect="non-scaling-stroke" إلى ذلك العنصر في مصدرك قبل تغيير الحجم.

حافِظ على نظافة الشيفرة

كثيرًا ما تحمل ملفات SVG المصدَّرة من Figma أو Illustrator أو Sketch وزنًا زائدًا: مساحات أسماء خاصة بالمحرّر (sodipodi:، inkscape:)، وبيانات وصفية مخفية، و<defs> غير مستخدمة. تترك هذه الأداة شيفرتك كما هي باستثناء الحجم. ولإزالة الزوائد، مرّر الملف عبر مُحسِّن مثل SVGO قبل تغيير الحجم أو بعده.

الأسئلة الشائعة

لا. يكتفي بتحديد width وheight على العنصر الجذر <svg>. يبقى viewBox والمسارات وكل إحداثي دون مساس، فيحافظ الرسم على نسبه الدقيقة.

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

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

نعم. يُغيَّر width وheight فقط؛ وتبقى <animate> و<script> ومعالِجات الأحداث و CSS داخل SVG دون مساس.

تُرسَل الشيفرة إلى خادمنا لعرض المعاينة بعد تغيير الحجم، ولا تُخزَّن بعد انتهاء الطلب. ولا تُحفَظ ولا تُشارَك.

أدوات ذات صلة

منتقي ألوان Material Design

تصفح لوحة ألوان Material Design وانسخ أي درجة (من 50 إلى A700) بصيغة HEX أو RGB أو HSL بنقرة واحدة.

مولد الورق المسطر

أنشئ ورقًا مسطرًا قابلًا للطباعة مجانًا. اختر تسطيرًا جامعيًا أو واسعًا أو ضيقًا، واضبط تباعد الأسطر بالمليمتر وحجم الصفحة وخط هامش، ثم اطبع أو نزّل ملف SVG.

مولّد ورق الرسم البياني

أنشئ ورق رسم بياني قابلاً للطباعة عبر الإنترنت: اختر شبكة مربّعات أو نقاطاً، واضبط التباعد بالمليمتر، وحدّد A4 أو Letter ولون خطوط مخصّصاً، ثم اطبع أو نزّل ملف SVG واضحاً.

صانع الأعلام

صمّم علماً مخصصاً بسيطاً بنسبة 3:2 في متصفحك باستخدام ستة تخطيطات وألوان ونص ورمز. نزّل SVG أو PNG، أو افتح مربع حوار الطباعة في المتصفح.

صانع لوحة الرؤية

حوّل أهدافك إلى لوحة بصرية: ارفع الصور وأضف عنوانًا وتعليقات شخصية واختر الألوان والتخطيط ثم نزّل صورة PNG قابلة للطباعة. كل شيء يبقى في متصفحك.

منشئ قوائم التصنيف إلى مستويات

أنشئ قائمة تصنيف خاصة من نصوص وصور محلية، وخصص المستويات ورتب بالسحب أو لوحة المفاتيح، ثم صدّر JSON أو PNG أو SVG.

الأداة متاحة بلغات أخرى