# SVG إلى صورة — حوِّل رسماً متجهياً إلى PNG أو JPEG أو WebP بأي حجم

حدّد الحجم. فالرسم المتجهي لا حجم له يخسره.

> حوِّل ملف SVG إلى PNG أو JPEG أو WebP بأي حجم، داخل متصفحك. حدّد العرض، أو مضاعفاً، أو إطاراً؛ واحصل على نسختَي ‎@2x‎ و‎@3x‎ كذلك. تبقى الشفافية، ولا يُرفع شيء.

هذه الصفحة أداة تفاعلية تعمل بالكامل داخل متصفحك، على العنوان https://abox.tools/ar/تحويل-svg-إلى-png/ — ولا يُرفَع أي شيء تعطيه إياها. وفيما يلي كل ما تقوله الصفحة عن الأداة بالكلمات؛ لاستخدامها، افتح العنوان.

## ملفات SVG الخاصة بك لا تُرفع **أبدا**. لا يوجد خادم.

يُحوَّل الرسم إلى بكسلات بالمحرّك نفسه الذي وضعه على شاشتك للتوّ. يُقرأ ملفك من قرصك، ويُعاد كتابة وسمه الجذري إلى الحجم الذي طلبته بمئة سطر في `src/svg.js` تستطيع قراءتها، ثم يُرسَم على لوحة يأتي بها متصفحك أصلاً. لا تملك هذه الأداة أي وظيفة شبكية على الإطلاق — لا شيء تجلبه ولا شيء ترسله — ولا يقف خلف هذه الصفحة خادم يُرسَل إليه شعار، حتى لو كان فيها ما يرسله.

- ✗ بلا رفع
- ✗ بلا حساب
- ✗ بلا علامة مائية
- ✓ يعمل دون اتصال
- ✓ مفتوح المصدر

## كيف تحوِّل ملف SVG إلى PNG دون رفعه

1. **اختر ملف SVG.** أفلِت واحداً على المُنتقي، أو اختر مجلداً منها وحوِّلها كلها دفعة واحدة. يقرأ المتصفح الملف من قرصك مباشرة؛ ولا يُرسَل شيء إلى أي مكان أثناء ذلك. ويقول كل صف بأي حجم يظن الملف نفسه — ويقوله على نحو مختلف حين يكون ذلك الحجم آتياً من `viewBox`، أو مفترَضاً لأن الملف لا يعلن حجماً أصلاً.
2. **قل كم يكون كبيراً.** مضاعفٌ لحجم الملف نفسه أسرع جواب وأصوبه لدفعة: فكل رسم يُقاس من نقطة بدايته هو، فتبقى مجموعة أيقونات متناسبة. وإلا فحدّد عرضاً، أو ارتفاعاً، أو أطول ضلع، أو إطاراً بضلعيه معاً. ولا عقوبة على رقم كبير هنا كما هي مع صورة فوتوغرافية — فالرسم يُعاد رسمه بذلك الحجم، لا يُمَطّ إليه.
3. **أضِف نُسَخ الكثافة العالية إن احتجت إليها.** يرسم الهاتف والحاسوب المحمول عالي الدقة بكسلَين أو ثلاثة من بكسلات الجهاز لكل بكسل CSS، فشعار بعرض 200 بكسل يحتاج إلى ملف بعرض 400 أو 600 خلفه. اطلب `@2x` و`@3x` فتخرج مسمّاة كما يتوقّعها Xcode وأدوات Android ودالّة `image-set()` في CSS جميعاً، وكل واحدة ضِعف الأولى أو ثلاثة أضعافها بالضبط لا مقرَّبة على حدة.
4. **اختر الصيغة واحسم أمر الشفافية.** PNG ما لم يكن لديك سبب: فهي بلا خسارة، وتحفظ الشفافية، واللون المسطَّح ينضغط فيها جيداً. أما JPEG فلا شفافية فيها البتة، فيُطلى لون خلفية شئت أم أبيت — فبدونه يخرج كل بكسل شفاف أسود. وWebP تفعل الأمرين وتنتج ملفاً أصغر، بثمن أن البرمجيات القديمة بما يكفي لا تقرؤها.
5. **انظر إلى المعاينة قبل أن تنزّل.** ترسمها الشيفرة نفسها التي تكتب الملف، من ملفك أنت، على جهازك. وشيئان يتغيّران حين يصير الرسم بكسلات وكلاهما يظهر هنا: الخط الشعري الذي كان بعرض نصف بكسل يصير رمادياً، وأي نصّ يُرسَم بخطّ يملكه هذا الحاسوب لا بخطّ يُجلَب من الويب.
6. **خذ الملفات.** تنزيلٌ لكل ملف، أو الدفعة كلها في ملف zip واحد. وتتبع الأسماء ملفَّ SVG الذي جاءت منه، وعليها `@2x` و`@3x` في النُّسَخ، وملفان كانا سيحملان الاسم نفسه يُرقَّمان بدل أن يحلّ أحدهما محلّ الآخر في صمت.

## النسخة الأطول

[كيف تحوّل ملف SVG إلى PNG بالمقاس الصحيح](https://abox.tools/ar/أدلة/تحويل-svg-إلى-png/): المتّجهُ ليس له مقاسٌ بالبكسل خاصٌّ به، فالرقمُ لك أنت أن تختاره. من أين يأتي ذلك الرقم لشاشة ولأيقونة تطبيق ولطابعة، وما الذي يتغيّر حين يصير الرسمُ بكسلات.

## أيضا في الصندوق

- [صورة إلى SVG](https://abox.tools/ar/تحويل-صورة-إلى-svg/): شكل واحد، وخط محيط واحد. أشِر إلى ما لا ينبغي أن يكون هناك.
- [رسم مقارنة الأطوال](https://abox.tools/ar/مقارنة-الاطوال/): اكتب الأطوال، وخذ الصورة. ولا يُرسَل شيء لرسمها.
- [ضاغط الصور](https://abox.tools/ar/ضغط-الصور/): حدّد الحجم، ويتكفّل هو بالباقي.
- [تغيير حجم الصور](https://abox.tools/ar/تغيير-حجم-الصورة/): قل الحجم. ارسم الإطار. اختر الصيغة.

## أسئلة

### هل يُرفع ملف SVG إلى أي مكان؟

لا. يقرأ متصفحك أنت الملف على جهازك أنت، ويرسمه على لوحة بالمحرّك نفسه الذي يعرض كل صورة أخرى تراها، ثم يعيده إليك تنزيلاً. لا تملك هذه الأداة أي وظيفة شبكية على الإطلاق — فهي لا تجلب شيئاً ولا ترسل شيئاً — و`Content-Security-Policy` الخاصة بالصفحة تُسمّي كل عنوان يجوز لها الاتصال به، وليس واحد منها لنا.

### بأي حجم ينبغي أن أحوِّل ملف SVG؟

بأي حجم يطلبه الشيء الذي سيقرؤه، مضروباً في نسبة بكسلات الجهاز للشاشة التي سيُرى عليها. فشعارٌ يشغل 200 بكسل CSS يحتاج إلى 400 لحاسوب محمول عالي الدقة و600 لهاتف حديث، وهو ما تكون نسختا `@2x` و `@3x` هنا. أما لأيقونة تطبيق أو لصفحة في متجر، فالمتجر يُسمّي رقماً بعينه وهو الرقم. وحين لا يخبرك شيء، فـ 1024 على أطول ضلع قيمة افتراضية مفيدة: كبيرة بما يكفي لأي استعمال تقريباً وصغيرة بما يكفي لأن تُرسَل بالبريد.

### هل يُفقد التكبير شيئاً من الجودة؟

لا، وهذا هو الموضع الوحيد الذي يكون فيه هذا الجواب «لا» بصدق. فالرسم المتجهي تعليمات لا بكسلات، فيرسم المتصفح المنحنيات من جديد بأي حجم يُطلَب. و4000 بكسل من أيقونة بحجم 24 بكسلاً حادٌّ تماماً كما كان 24. والذي لا تستطيعه هو العكس: فمتى صارت PNG صارت بكسلات كغيرها، فحوِّلها بالحجم الذي تحتاجه بدل أن تغيّر حجم الناتج بعد ذلك.

### ملف SVG عندي بلا عرض ولا ارتفاع. فأي حجم أحصل عليه؟

الـ `viewBox`، إن وُجد — فعرضه وارتفاعه وحدات مستخدِم لا بكسلات، لكنهما الرقمان الوحيدان في الملف والمتصفح يعاملهما على أنهما الحجم الطبيعي للرسم. وإن لم يكن ثمّة viewBox أيضاً، قالت الصفحة *مفترَض* بجانب الصف واستعملت ⁦300 × 150⁩، وهو ما كان وسم `<img>` سيرسمه به. وفي الحالين تستطيع أن تُسمّي الحجم الذي تريده فيُرسَم الملف به.

### لماذا يبدو النصّ مختلفاً في ملف PNG؟

لأن الخطّ ليس داخل ملف SVG. فملف SVG الذي يرسم نصّاً يُسمّي خطّاً ويترك للجهاز أن يجده، والملف الذي يجلب واحداً من Google Fonts بـ `@import` لا يحصل على شيء هنا: فملف SVG المرسوم عبر وسم `<img>` لا يُسمح له بجلب أي شيء، وهي القاعدة نفسها التي تمنعه من الاتصال بأحد ومعه ملفك. والعلاج هو الذي يعرفه كل مصمّم أصلاً — حوِّل النصّ إلى مسارات في برنامج الرسم قبل التصدير. فيصير حينئذ هندسةً، ويبدو كما هو في كل مكان.

### هل يستطيع تحويل عدة ملفات دفعة واحدة؟

نعم. يُعرَض كل ملف SVG في القائمة بالإعدادات نفسها وتنزل الدفعة في ملف zip واحد. والمضاعف — «4× الحجم الذي يطلبه الملف» — هو الإعداد الصائب لدفعة عادةً، لأن كل رسم يُقاس من حجمه هو بدل أن تُفرَض عليها كلها البكسلات نفسها. وانقر أي صف لتضع ذلك الملف في المعاينة.

### هل ثمّة حدّ للحجم؟

حدُّ المتصفح لا حدُّنا. فاللوحة تستسلم في مكان ما بعد 16,384 بكسلاً على الضلع، وSafari على iPhone أو iPad يقف عند نحو 16.7 ميغابكسل من المساحة — أي ⁦4096 × 4096⁩. وفوق ذلك تحذّرك الصفحة بدل أن تعيد إليك صورة فارغة، وهو ما يفعله المتصفح حين ينفد ما عنده: تعيد `toBlob` لا شيء البتة، دون خطأ يفسّر نفسه. وبعد 100 ميغابكسل ترفض الأداة، لأن ذلك 400 MB من اللوحة قبل أن يُرمَّز بايت واحد.

### ماذا يحدث للشفافية؟

تبقى، في PNG وفي WebP. أما JPEG فليس فيها قناة ألفا البتة، فيُطلى لون خلف الصورة كلها سواء طلبته أم لا — فبدونه يخرج كل شفاف أسود، وهو ما يبدو خللاً لا يبدو JPEG. واختيار لون خلفية مع PNG أمر عادي تماماً أن تريده كذلك: فهو يُسطِّح الرسم على ذلك اللون بدل أن يترك ثقباً.

### هل يستطيع قراءة ملف SVG فيه نصّ برمجي أو صورة خارجية؟

يستطيع قراءته، وسيرسم بالضبط الأجزاء التي يقبل المتصفح رسمها. فملف SVG المحمَّل عبر وسم `<img>` في *الوضع الساكن الآمن*: فلا تعمل النصوص البرمجية، ولا تُجلَب المراجع الخارجية، ولا تعمل الحركة — والإطار الأول هو ما تحصل عليه. فملفٌ فيه وسم `<image>` بعيد يخرج وذلك الجزء ناقص منه. وذلك رفضٌ من المتصفح نيابةً عنك، وهو سبب قدرة هذه الصفحة على فتح ملف لم ترَه قط بأمان.

### ما الفرق بين هذا وأداة تغيير حجم الصور؟

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

### هل هو مجاني، وهل أحتاج إلى حساب؟

هو مجاني، ولا حساب ولا تسجيل دخول ولا فترة تجريبية ولا علامة مائية. ولا حدّ لعدد الملفات ولا لأحجامها كذلك، إذ لا خادم يدفع ثمنها — فالعمل يجري على جهازك أنت. ويحمل الموقع إعلانات، وهي ما يدفع تكاليفه؛ ولا يُعطى المعلنون شيئاً عن ملفاتك.

### هل يعمل دون اتصال؟

نعم. حمِّل الصفحة مرة، ثم اقطع اتصالك بالإنترنت وستظل تعمل. وهذه أيضاً أبسط طريقة لإثبات أنه لا يُرفع شيء: فأداةٌ ترسل أعمالك الفنية بعيداً لتُعرَض كانت ستتوقف في اللحظة التي تقطع فيها الاتصال.

## كيف يمكن التحقق من وعد الخصوصية

- **أعمالك الفنية لا سبيل لها إلى الخروج.** تُسمّي Content-Security-Policy كل عنوان يجوز لهذه الصفحة الاتصال به، وليس واحد منها لنا. فلا يوجد هنا طرفٌ تُجمَع عنده ملفاتك، ولا في الشيفرة ما يرسلها إليه لو وُجد.
- **لا شيء هنا يجلب شيئاً.** لا يوجد `fetch` ولا `XMLHttpRequest` ولا `sendBeacon` في أي موضع من `src/`. والمحوِّل كله وسمُ `<img>` يحمل كائن blob من ملفك أنت، و `drawImage` واحد على لوحة، و`canvas.toBlob` واحد.
- **ملف SVG مستند، وهذا هو الوضع الذي لا يستطيع فيه أن يفعل شيئاً.** قد يحمل ملف SVG وسم `<script>`، ووسم `<image href="https://…">` بعيداً، وورقة أنماط، وخطّ ويب. وحين يُرسَم عبر وسم `<img>` يكون فيما تسمّيه المواصفة *الوضع الساكن الآمن* (secure static mode): فلا يعمل النصّ البرمجي ولا يُجلَب واحد من تلك العناوين. وذلك ضمانٌ من المتصفح لا وعدٌ منا، وهو السبب في أن هذه الصفحة تستطيع فتح ملف لم ترَه قط دون أن يقدر الملف على الاتصال بأحد.
- **ما تُحمّله Google، وما لا يُعطى لها.** نصوص الإعلانات والقياس تأتي من Google، وزر التبرّع من Buy Me a Coffee. ولا يُعطى أيٌّ منها شيئاً عن رسمك. وكل سطر يقرأ ملفاً أو يحدّد حجمه أو يرسمه يُخدَم من هذا الأصل نفسه ومُدرَج في المستودع.
- **يعمل دون اتصال.** اقطع الاتصال بالشبكة، وتبقى الأداة كما هي، لأنه لم تكن فيها خطوة شبكية قط. وهذا أبسط برهان على الإطلاق.

**تحقّق بنفسك.** لا شيء مما سبق عليك تصديقه دون تحقق. تُولَّد هذه الصفحة من القوالب والإعدادات في المستودع بواسطة سكربت بناء يمكنك قراءته وتشغيله بنفسك، والنتيجة موجودة في فرع `dist` — فقارِن إذن بين ما يُقدَّم فعلا وما ينتجه بناء المصادر: https://github.com/A-Box-of-Tools/website

الملفات الجديرة بالقراءة أولا هي `config/site.toml` من أجل سياسة أمان المحتوى (Content-Security-Policy)، و`src/svg.js` لكيفية قراءة حجم الملف نفسه وكيفية إعادة كتابة وسمه الجذري، و`src/render.js` للأسطر الثمانية التي تؤدي التحويل إلى بكسلات — وسم <img>، و`drawImage`، و`toBlob`، ولا شيء بينها.