عنصر SVG <image>

يستخدم عنصر <image> في SVG لدمج صورة بيتماب في صورة SVG. بهذه الطريقة، يمكنك رسم فوق أو بجانب صورة البيتماب. يدعم برنامج تحويل صورة SVG أنواع JPEG و PNG؛ يمكن لعدد من عناصر SVG دمج أي صورة فائقة الحد. في صور الفائقة الحد، يمكنك استخدام مرشحات SVG، ماسكات، دوران، قطع، وأدوات أخرى.

مثال على صورة SVG

هذا مثال على صورة SVG:

　　　　<svg width="500" height="160">
　　　　　　　　<rect x="10" y="10" height="130" width="500" style="fill: #000000"></rect>
　　　　　　　　<image x="20" y="20" width="300" height="80" xlink:href="/static/images/logo.png"></image>
　　　　</svg>
　　　　<svg>
　　　　　　　　<image x="20" y="20" xlink:href="/static/images/logo.png"></image>
　　　　　　　　<line x1="25" y1="80" x2="350" y2="80"></line>
　　　　</svg>

تأثير الصورة بعد التشغيل:

أولاً، رسم مستطيل أسود. ثانياً، رسم شعارتي كصورة فوق مستطيل الأسود. وأخيراً، رسمت خطاً أبيض فوق صورتي ومستطيل الأسود.

يُسجل عناصر SVG في الملف في نفس الترتيب يُرسمون به. يُرسم العنصر التالي فوق العنصر السابق.

يمكنك أيضًا استخدام عنصر <image> لدمج صور SVG أخرى. لا يجب أن تكون صورة رaster.

مثال لتحويل الصورة:

<svg width="500" height="160">
<image x="90" y="-65" width="100" height="146" transform="rotate(45)"
　　　　　xlink:href="/static/images/logo.png"/>
</svg>

توضيح الاستخدام:

• width و height يحددان عرض الصورة وارتفاعها.

• xlink:href يحدد رابط الصورة.

نتيجة التشغيل النهائية كالتالي: