ما هو SVG؟
- SVG لتقف على تحجيم الرسومات المتجهات
- يستخدم SVG لتحديد الرسومات للويب
- SVG هو توصية W3C
قابلة للرسومات المتجهات (SVG) هو متجه شكل صورة تستند إلى XML لرسومات ثنائية الأبعاد مع دعم التفاعل والرسوم المتحركة. مواصفات SVG هو معيار مفتوح وضعتها واسعة اتحاد شبكة ويب العالمية (W3C) منذ عام 1999.
يتم تعريف الصور SVG وتصرفاتهم في ملفات نصية XML. وهذا يعني أنها يمكن البحث فيها، فهرستها، كتابتها، ومضغوط. كملفات XML، صور SVG يمكن إنشاء وتحريرها مع أي محرر نصوص، وكذلك مع برنامج الرسم.
جميع المتصفحات الرئيسية، بما في ذلك الويب الحديثة موزيلا فايرفوكس، وإنترنت إكسبلورر، جوجل كروم، أوبرا، سفاري، ومايكروسوفت الحافة يكون SVG تقديم الدعم.
وHTML <svg> العنصر
وHTML <svg> عنصر (introduced in HTML5) هو وعاء للرسومات SVG.
SVG لديها عدة طرق لرسم مسارات، وصناديق، والدوائر، والنص، والرسوم البيانية والصور.
دعم المتصفح
الأرقام في الجدول تحدد أول نسخة متصفح يدعم بشكل كامل <svg> العنصر.
| جزء | |||||
|---|---|---|---|---|---|
| <svg> | 4.0 | تسعة | 3.0 | 3.2 | 10.1 |
SVG الدائرة
مثال
<!DOCTYPE html>
<html>
<body>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html> انها محاولة لنفسك » SVG مستطيل
RGB (0،0،0) ">
مثال
<svg width="400" height="100">
<rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>
SVG مدور مستطيل
عذرا، متصفحك لا يدعم SVG المضمنة.
مثال
<svg width="400" height="180">
<rect x="50" y="20" rx="20" ry="20" width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
SVG ستار
عذرا، متصفحك لا يدعم SVG المضمنة.
مثال
<svg width="300" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
SVG شعار
SVG عذرا، متصفحك لا يدعم SVG المضمنة.
مثال
<svg height="130" width="500">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
<text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
Sorry, your browser does not support inline SVG.
</svg>
الاختلافات بين SVG و Canvas
SVG هي لغة لوصف الرسومات 2D في XML.
Canvas يرسم الرسومات 2D، على الطاير (with a JavaScript) .
SVG هو أكس، مما يعني أن كل عنصر متاح داخل SVG DOM. يمكنك إرفاق معالجات الأحداث جافا سكريبت لعنصر.
في SVG، تذكرت كل شكل رسم ككائن. إذا تم تغيير سمات كائن SVG، والمتصفح تلقائيا يمكن إعادة تقديم الشكل.
يتم تقديم قماش بكسل بكسل. في قماش، ومرة واحدة ويوجه الرسم، ونسي من قبل المتصفح. إذا كان يجب تغيير موقفها، يحتاج المشهد بأكمله ليتم إعادة رسم، بما في ذلك أي الكائنات التي قد تم تغطيتها من قبل الرسم.
المقارنة من قماش وSVG
ويبين الجدول التالي بعض الاختلافات الهامة بين قماش وSVG:
| Canvas | SVG |
|---|---|
|
|
لمعرفة المزيد حول SVG، يرجى قراءة SVG التعليمي .