عرض SVG في الويب

يمكن عرض SVG في متصفح الويب (مثل Chrome، Firefox و Internet Explorer) عن طريق توجيه المتصفح إلى عنوان URL ملف SVG، إدراج SVG في صفحة HTML، استخدام عنصر iframe، استخدام عنصر img وما إلى ذلك من الطرق

يمكن عرض SVG في متصفح الويب (مثل Chrome، Firefox و Internet Explorer) بالطرق التالية:

• يُوجه المتصفح إلى عنوان URL ملف SVG

• إدراج SVG في صفحة HTML

يمكنك إدراج صورة SVG في ملف HTML باستخدام أحد الطرق التالية:

• استخدام عنصر iframe

• استخدام عنصر img

• استخدام صورة SVG كخلفية

• استخدام عنصر svg

• استخدام العناصر المدمجة

إطار iframe

إذا كنت تدخل عنوان URL لصورة SVG، فإن المتصفح يمكنه عرض صور SVG، لذا يمكنك أيضًا استخدامها لضم صور SVG في علامة iframe في صفحة HTML. إليك مثال:

<iframe src="mySvgImage.svg" width="200" height="200">

img

الصورة مثل استخدام أي نوع آخر من الصور، يتم استخدام العناصر لإدراج صورة SVG أيضًا. يمكنك كتابة عنوان الصورة SVG في خاصية src عنصر img، مثلما هو موضح أدناه:

<img　src="/svg/circle-element-1.jsp">

سيعرض SVG مثل أي صورة أخرى في صفحة HTML.

SVG كصورة خلفية

بما أن المتصفح يعامل صورة SVG مثل صورة البتة، يمكنك استخدام SVG كصورة خلفية باستخدام CSS. هذا مثال:

div　{
　　　　background-image:　url('my-svg-image.svg');
　　　　background-size　:　100px　100px;
{}

قد تحتاج إلى تعيين حجم الصورة الخلفية لـ SVG لتخبر المتصفح كيفية التكبير والتكغير.دليل تعيين الصور الخلفية CSSلمعرفة المزيد عن الصور الخلفية.

عناصر svg في HTML

يمكن دمج صورة SVG باستخدام عنصر SVG مباشرة في صفحة HTML، مثلما يلي:

<div><svg>
　　　　<circle　cx="40"　cy="40"　r="24"　style="stroke:#006600;　fill:#00cc00"/>
　　　　</svg></div>

هناك عنصر div فقط لشرح أن عنصر svg يمكن دمجه مباشرة في HTML. ومع ذلك، لا يجب دمج عنصر svg في عنصر div.

باستخدام عنصر SVG، يمكنك دمج SVG مباشرة في صفحة HTML بدلاً من وضع صورة SVG في ملفها الخاص. يمكنك تعيين عرض وارتفاع صورة SVG من خلال إضافة خصائص عرض width وارتفاع height لعنصر SVG.

من خلال استخدام عنصر svg، يمكنك أيضًا إنشاء svg مباشرة في المتصفح باستخدام JavaScript. API JavaScript D3 جيد جدًا في هذا. يمكن لـ API JavaScript jQuery أيضًا القيام بذلك.

باستخدام عنصر svg، يمكنك أيضًا تعيين النمط لـ svg وأبناء عنصره باستخدام CSS، كما تفعل مع أي HTML آخر. انتبه، قد تكون أسماء بعض خصائص SVG مختلفة عن أسماء خصائص HTML.

embed

في بداية SVG، يمكنك استخدام عنصر embed لدمج صورة SVG. في ذلك الوقت، لم يدعم جميع المتصفحات SVG. اليوم، أوصي باستخدام عناصر img أو svg. هنا مثال على دمج العناصر وتاريخ السبب:

<embed　src="/svg/simple-example-1.jsp"
　　　　　　　width="300"　height="220"
　　　　　　　type="image/svg+xml"
　　　　　　　pluginspage="http://www.adobe.com/svg/viewer/install/"　/>

ضع العنصر في المكان الذي يتم عرض صورة SVG في ملف HTML. يجب أن يشير src إلى عنوان URL للصورة SVG.

لاحظ خاصية pluginspage. هذا ضروري للمتصفحات القديمة التي لا تدعم عرض SVG بشكل محلي. تحتاج هذه المتصفحات إلى مكون إضافي SVG من Adobe لعرض الصور. في Internet Explorer 7 و Firefox 3.0.5، هذه الخاصية ليست ضرورية، ولكن يمكن إضافتها.

سمتا Width و Height

بغض النظر عما إذا كنت تستخدم عنصر img أو svg أو embed لإنشاء صورة SVG، يمكنك استخدام سمتي width و height لضبط عرض وارتفاع الصورة. إذا كانت الصورة في ملف SVG أكبر من هذه الأرقام، فإن المتصفح سيظهر فقط جزءًا من صورة SVG. تأكد من أن العرض والارتفاع الذي قمت بضبطه كبير بما يكفي لعرض الصورة الكاملة (أو العرض الذي ترغب في عرضه).

استخدام SVG كصورة خلفية لعنصر HTML

يمكن استخدام خاصية background-image لـ CSS لتقديم صورة SVG كصورة خلفية للعنصر HTML. فقط تحتاج إلى تشير إلى ملف SVG كأي ملف صورة آخر. ليس كل المتصفحات يدعم هذا تمامًا، قم بالاختبار في المتصفحات التي تخطط لدعمها. إليك مثال:

.myCSSClass {
　　　　background: url(/mySvgImage.svg);
{}

متطلبات التطبيق للمتصفح

Internet Explorer الإصدارات 9 وما فوق يمكن عرض SVG بشكل محلي. عند كتابة هذا المقال، كان Firefox، Chrome، Safari، Opera و متصفح Android قادرين على عرض SVG بشكل محلي منذ فترة طويلة. أيضًا، متصفح Safari الخاص بـ iOS، متصفح Opera Mini والمتصفح المحمول لـ Android، ومتصفح Chrome.

نوع المحتوى

إذا كانت عنوان URL المتصفح ينتهي بـ .svg، فإن المتصفح سيتمكن من التكهن نوع MIME للملف SVG. ولكن، عندما يتم إنشاء SVG من servlet، JSP، PHP، ASP.NET صفحة أو أي مكون آخر من تطبيق الويب، فإن عنوان URL لا ينتهي بالضرورة بـ .svg.
للإبقاء على تفسير المتصفح للملف كملف SVG، يجب عليك إعداد رأس HTTP Content-Type المناسب

image/svg+xml

إذا قمت بمراجعة عنصر <embed> السابق، ستلاحظ أن ذلك يتم أيضًا في سمة type. يكفي إعداد نوع المحتوى في عنصر <embed> لـ Internet Explorer، ولكن ليس كذلك لـ Firefox. يجب أيضًا إعداد نوع المحتوى في رأس HTTP Response Type Content.

إضافة إلى ذلك، إذا قمت بتوجيه المتصفح مباشرة إلى ملف SVG على الخادم، فإنه لا يوجد علامة <embed> يمكنها تنفيذ هذا العمل. ثم ستحتاج إلى تعيين نوع المحتوى في استجابة HTTP بنفسك.
هذه هي الطريقة التي يتم بها القيام بذلك في JSP:

<%　response.setContentType("image/svg+xml");%>
<svg　...　>

هذا يشبه جداً تنفيذ servlet. إذا كنت تستخدم تقنية مختلفة عن Java، فما عليك سوى البحث في جوجل للحصول على مثال على كيفية تعيين نوع المحتوى في استجابة HTTP. سيكون هناك العديد من الأمثلة.