How does HTML to SVG work?

Your HTML is placed inside an SVG foreignObject, which browsers render as part of the vector so it scales without pixelation.

Do external images and fonts work?

Inline CSS and data-URI images work best. External resources may not load when the SVG is opened outside your site.

Is my HTML uploaded anywhere?

No. The SVG is generated entirely in your browser.

Can I set the size of the SVG?

Yes. Enter any width and height in pixels before generating. They define the SVG canvas and its viewBox, and because the file is a vector you can scale it later without losing sharpness.

Why does my SVG look blank in some graphics apps?

foreignObject is rendered by web browsers, but many graphics editors such as Inkscape or Illustrator do not fully support it. For best results use the SVG on web pages or in browser-based tools.

Can I turn the result into a PNG or JPG instead?

This tool keeps your markup as a vector and never rasterizes it. If you need a pixel image, render the same HTML with our HTML to Image tool, which outputs PNG, JPG or PDF.

من HTML إلى SVG

غلّف HTML وCSS المضمّن داخل SVG قابل للتحجيم باستخدام foreignObject. عاينه مباشرة ونزّل ملف .svg جاهزًا للاستخدام. كل شيء يعمل في متصفحك.

كود HTML

العرض

الارتفاع

معاينة

مصدر SVG

HTML داخل متجه قابل للتحجيم

يتيح لك عنصر foreignObject في SVG تضمين HTML وCSS حيّين داخل صورة متجهة. تتحجم النتيجة بسلاسة ويمكن استخدامها في أي مكان يُقبل فيه SVG - وهي رائعة للشارات والبطاقات والتسميات الغنية.

لماذا تغلّف HTML داخل SVG؟

صورة SVG المبنية بـforeignObject ليست لقطة شاشة - يبقى الكود الخاص بك حيًا داخل الملف. يظل النص نصًا حقيقيًا، وتستمر CSS المضمّنة في تنسيقه، ولا يتحول أي شيء إلى صورة بكسلية، لذا يبقى الرسم واضحًا تمامًا عند أي مستوى تكبير بينما يبلغ حجم الملف نفسه عادةً بضعة كيلوبايتات فقط. هذا يجعل هذا الأسلوب مناسبًا تمامًا لشارات README وبطاقات الملفات الشخصية وأدوات لوحات التحكم وأي مكان آخر تريد فيه أن يتصرف مقتطف HTML منسّق كملف صورة واحد يمكنك استضافته أو تضمينه أو التحكم بإصداراته.

متجه أم لقطة شاشة - أيهما تحتاج؟

استخدم هذه الأداة عندما ستُعرض النتيجة في متصفح ويب، لأن المتصفحات تعرض foreignObject بشكل أصلي وتحافظ على وضوحه. إذا كنت تحتاج إلى صورة بكسلية تعمل في كل مكان - في تطبيقات الدردشة أو المستندات أو برامج التصميم - فاعرض نفس الكود باستخدام محول HTML إلى صورة لدينا بدلًا من ذلك، والذي ينتج PNG أو JPG أو PDF. الأداتان متكاملتان: إحداهما تحافظ على HTML كمتجه قابل للتحجيم، والأخرى تجمّده في صورة نقطية.

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

كل ما تحتاج معرفته عن تحويل HTML إلى SVG.

يوضع HTML الخاص بك داخل <foreignObject> في SVG، وتعرضه المتصفحات كجزء من المتجه. يتحجم كل شيء دون تكسّر البكسلات.

تعمل CSS المضمّنة والصور بصيغة data-URI بأفضل شكل. قد لا تُحمَّل الموارد الخارجية عند فتح SVG خارج موقعك، لذا ضمّن ما تستطيع.

لا. يُنشأ SVG بالكامل في متصفحك.

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

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

تحافظ هذه الأداة على الكود الخاص بك كمتجه ولا تحوله أبدًا إلى صورة بكسلية. إذا كنت تحتاج إلى صورة بكسلية، اعرض نفس HTML باستخدام أداة HTML إلى صورة لدينا، والتي تُخرج PNG أو JPG أو PDF.