HTML <svg> Tag
بطور کلی تگ <svg> در HTML به منظور رسم تصاویر گرافیکی دو بعدی بکار می رود.
بیشتر مرورگرهای موجود همانطور که توانایی نمایش عکس با فرمت های مختلف را دارند، می توانند تصاویر SVG را نیز نمایش دهند. در مرورگر Internet Explorer شاید نیاز به نصب Adobe SVG Viewer باشد. انواع عنصر SVG برای ترسیم اشکال مختلف عبارتند از:
SVG
تگ <svg> یک دربرگیرنده (container) است که محدوده دید (viewport) و مختصات مختص به خود را تولید می کند. این عنصر، والد تمام عناصر دیگر SVG برای ساخت اشکال هندسی و خطوط می باشد. همینطور می توان از آن برای ساخت عناصر تودر توی SVG استفاده کرد.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
h2 {
direction: rtl;
}
svg {
position: relative;
left: 50%;
transform: translateX(-50%);
}
</style>
</head>
<body>
<h2 align="center">ترسیم شکل با SVG</h2>
<svg height="100"
viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg" stroke="red" fill="grey">
<rect cx="50" cy="50" width="150" height="100" rx="10" />
<svg viewBox="0 0 10 10" x="200" width="100">
<circle cx="5" cy="5" r="4" />
</svg>
</svg>
</body>
</html>
نتیجه:
مشاهده و ویرایش کد در حالت تمام صفحه
صفت ها (Attributes)
height
ارتفاع عنصر SVG را که به عنوان یک نگهدارنده را مشخص می کند.
viewBox
محدوده فضایی که عنصر SVG در آن نمایش داده می شود را مشخص می کند.
width
عرض محدوده دید عنصر SVG مشخص می کند.
SVG Circle
تگ <circle> از مجموعه تگ های زیر مجموعه <svg> برای رسم دایره بکار می رود.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
#svgelem {
position: relative;
left: 50%;
transform: translateX(-50%);
}
</style>
</head>
<body>
<h2>ترسیم دایره با SVG</h2>
<svg id="svgelem" height="100" xmlns="http://www.w3.org/2000/svg">
<circle id="redcircle" cx="150" cy="50" r="50" fill="red" />
</svg>
</body>
</html>
نتیجه:
مشاهده و ویرایش کد در حالت تمام صفحه
نکته: در مثال بالا، مستطیل خاکستری همان عنصر <svg> است که به عنوان در برگیرندۀ (container) تگ <circle> برای رسم دایره عمل می کند.
صفت ها (Attributes)
cx
موقعیت مرکز دایره را در محور افقی (X) تعیین می کند.
cy
موقعیت مرکز دایره را درُ محور عمودی (Y) تعیین می کند.
r
شعاع دایره را تعیین می کند. اگر مقدار آن برابر با 0 باشد، شکلی ترسیم نخواهد شد.
SVG Rectangle
تگ <rect> از مجموعه تگ های زیر مجموعه <svg> و برای رسم چهارضلعی بکار می رود.
<html>
<head>
<meta charset="utf-8" />
<style>
h2 {
direction: rtl;
text-align: center;
}
#svgelem {
position: relative;
left: 50%;
transform: translateX(-50%);
}
</style>
</head>
<body>
<h2 align="center">رسم مستطیل با SVG</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
<rect id="redrect" width="300" height="100" fill="dodgerblue" />
</svg>
</body>
</html>
نتیجه:
مشاهده و ویرایش کد در حالت تمام صفحه
صفت ها (َAttributes)
x
موقعیت چهارضلعی را در محور افقی (X) تعیین می کند.
y
موقعیت چهارضلعی را در محور عمودی (Y) تعیین می کند.
width
عرض چهارضلعی را مشخص می کند.
height
ارتفاع چهارضلعی را مشخص می کند.
rx
میزان گردی قسمت افقی گوشه های چهار ضلعی را تعیین می کند.
ry
میزان گردی قسمت عمودی گوشه های چهار ضلعی را تعیین می کند.
SVG Line
تگ <line> از مجموعه تگ های زیر مجموعه <svg> و برای رسم خط بکار می رود.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
h2 {
direction: rtl;
}
#svgelem {
position: relative;
left: 50%;
transform: translateX(-50%);
}
</style>
</head>
<body>
<h2 align="center">ترسیم خط با SVG</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="0" x2="200" y2="100" style="stroke:violet;stroke-width:2"/>
</svg>
</body>
</html>
نتیجه:
مشاهده و ویرایش کد در حالت تمام صفحه
صفت ها (Attributes)
x1
موقعیت نقطه آغازین خط را در محور افقی (X) تعیین می کند.
x2
موقعیت نقطه آغازین خط را در محور عمودی (Y) تعیین می کند.
y1
موقعیت نقطه پایانی خط را در محور افقی (X) تعیین می کند.
y2
موقعیت نقطه پایانی خط را در محور عمودی (Y) تعیین می کند.
SVG Ellipse
تگ <ellipse> از مجموعه تگ های زیر مجموعه <svg> و برای رسم بیضی بکار می رود.
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8" />
<style>
#svgelem {
position: relative;
left: 50%;
transform: translateX(-40%);
}
</style>
</head>
<body>
<h2 align="center">ترسیم بیضی با SVG</h2>
<svg id="svgelem" height="100" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="150" cy="50" rx="100" ry="50" fill = "orangered" />
</svg
</body>
</html>
نتیجه:
مشاهده و ویرایش کد در حالت تمام صفحه
صفت ها (Attributes)
cx
موقعیت بیضی را در محور افقی (X) تعیین می کند.
cy
موقعیت بیضی را در محور عمودی (Y) تعیین می کند.
rx
شعاع بیضی را در محور افقی (X) را تعیین می کند
ry
شعاع بیضی در محور عمودی (Y) را تعیین می کند.
SVG Polygon
تگ <polygon> از مجموعه تگ های زیر مجموعه <svg> است و برای رسم چند ضلعی (سه ضلع و بیشتر) بکار می رود. این عنصر اشکال بسته را ایجاد می کند.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
h2 {
direction: rtl;
}
svg {
position: relative;
left: 50%;
transform: translateX(-40%);
}
</style>
</head>
<body>
<h2 align="center">ترسیم شکل با خطوط راست توسط SVG</h2>
<svg height="100" xmlns="http://www.w3.org/2000/svg">
<polygon points="0,100 50,25 50,75 100,0" fill="red" />
<polygon points="100,100 150,25 150,75 200,0" fill="none" stroke="black"stroke-width="2px"/>
</svg>
</body>
</html>
نتیجه:
مشاهده و ویرایش کد در حالت تمام صفحه
صفت ها (Attributes)
points
این صفت لیستی از نقاطی را مشخص می کند که خطوط بین آنها ترسیم می شود. مختصات این نقاط به صورت یک جفت (x,y) مشخص می شود.
SVG Polyline
تگ <polyline> از مجموعه تگ های زیر مجموعه <svg> است و برای رسم اشکال باز بکار می رود. در این شکل ها آخرین نقطه به اولین نقطه متصل نمی شود.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
h2 {
direction: rtl;
}
svg {
position: relative;
left: 50%;
transform: translateX(-40%);
}
</style>
</head>
<body>
<h2 align="center">ترسیم شکل با خطوط راست توسط SVG</h2>
<svg height="100" xmlns="http://www.w3.org/2000/svg"
<polyline points="0,100 50,25 50,75 100,0" />
<polyline points="100,100 150,25 150,75 200,0" fill="none" stroke="red" />
</svg>
</body>
</html>
نتیجه:
مشاهده و ویرایش کد در حالت تمام صفحه
صفت ها (Attributes)
points
این صفت لیستی از نقاطی را مشخص می کند که خطوط بین آنها ترسیم می شود. مختصات این نقاط به صورت یک جفت (x,y) مشخص می شود.
SVG Linear Gradients
تگ <lineargradient> از مجموعه تگ های زیر مجموعه <svg> است که برای ایجاد شیب رنگ (gradient) بکار می رود.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
h2 {
direction: rtl;
}
svg {
position: relative;
left: 50%;
transform: translateX(-50%);
}
</style>
</head>
<body>
<h2 align="center">ترسیم گرادینت توسط SVG</h2>
<svg height="100" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="myGradient" gradientTransform="rotate(90)">
<stop offset="5%" stop-color="gold" />
<stop offset="95%" stop-color="red" />
</linearGradient>
</defs>
<circle cx="145" cy="50" r="50" fill="url('#myGradient')" />
</svg>
</body>
</html>
نتیجه:
مشاهده و ویرایش کد در حالت تمام صفحه
صفت ها (Attributes)
gradientTransform
این صفت درجه گرادینت را مشخص می کند.
href
این صفت یک عنصر <lineargradient> دیگر را به عنوان مرجع قرار می دهد و از آن به عنوان قالب آماده استفاده می کند.
x1
موقعیت نقطه آغازین گرادینت را در محور افقی (X) را مشخص می کند.
x2
موقعیت نقطه پایانی گرادینت را در محور افقی (X) را مشخص می کند.
y1
موقعیت نقطه آغازین گرادینت را در محور عمودی (Y) را مشخص می کند.
y2
موقعیت نقطه پایانی گرادینت را در محور عمودی (Y) را مشخص می کند.
پشتیبانی مرورگرها
نسخه های جدید تمام مرورگرها از این تگ HTML پشتیبانی می کنند.
