SVG در HTML5
بهنام نوبخت · ۱۴۰۵/۶/۲۸
در مقاله قبل با Canvas آشنا شدیم؛ روشی که به کمک JavaScript امکان رسم شکل‌ها و گرافیک دوبعدی را فراهم می‌کند. اما Canvas تنها راه ایجاد گرافیک در صفحات وب نیست. SVG یا Scalable Vector Graphics یکی دیگر از فناوری‌های مهم وب برای ساخت تصاویر و اشکال برداری است. SVG برخلاف تصاویر پیکسلی، از عناصر و مسیرهای برداری تشکیل می‌شود و به همین دلیل می‌تواند در اندازه‌های مختلف بدون افت کیفیت نمایش داده شود. همچنین از آنجا که SVG به صورت ساختاریافته در HTML قابل استفاده است، می‌توان عناصر آن را با CSS و JavaScript نیز کنترل کرد. در این مقاله از ساده‌ترین مثال‌ها شروع می‌کنیم و به تدریج با شکل‌ها، رنگ‌ها، مختصات، viewBox و تفاوت SVG و Canvas آشنا می‌شویم.
SVG چیست؟
SVG مخفف عبارت:
Scalable Vector Graphics
است.
به زبان ساده، SVG یک روش برای ساخت گرافیک برداری در وب است.
مثلاً می‌توانیم با SVG موارد زیر را ایجاد کنیم:
مستطیل
دایره
خط
مثلث
چندضلعی
مسیرهای پیچیده
متن
آیکون
لوگو
نمودار
تصاویر برداری
SVG بر پایه ساختار متنی و عناصر مشخصی ساخته می‌شود و می‌تواند مستقیماً داخل HTML قرار بگیرد.
تصویر پیکسلی و برداری چه تفاوتی دارند؟
قبل از ادامه بهتر است دو مفهوم مهم را بشناسیم.
تصاویر پیکسلی
تصاویر معمولی مانند:
JPG
PNG
WebP
GIFاز تعداد زیادی پیکسل تشکیل شده‌اند.
اگر یک تصویر پیکسلی را بیش از حد بزرگ کنیم، ممکن است کیفیت آن کاهش پیدا کند.
مثلاً:
تصویر کوچک
↓
بزرگ‌نمایی زیاد
↓
نمایش پیکسل‌ها
↓
کاهش کیفیت
تصاویر برداری
در تصاویر برداری، شکل‌ها بر اساس اطلاعات هندسی توصیف می‌شوند.
مثلاً به جای اینکه بگوییم:
این تصویر شامل هزاران پیکسل است.
می‌توانیم بگوییم:
یک دایره با مرکز مشخص و شعاع مشخص ایجاد کن.
در SVG مثلاً یک دایره به این شکل تعریف می‌شود:
<circle
cx="100"
cy="100"
r="50">
</circle>مرورگر شکل را بر اساس این اطلاعات رسم می‌کند.
به همین دلیل SVG برای مواردی مانند لوگوها، آیکون‌ها و اشکال هندسی بسیار مناسب است.
اولین SVG
یک فایل HTML ایجاد کنید و کد زیر را داخل آن قرار دهید:
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<title>اولین SVG</title>
</head>
<body>
<svg width="300" height="200">
</svg>
</body>
</html>در اینجا:
<svg width="300" height="200">
</svg>یک فضای SVG ایجاد کرده‌ایم.
اما هنوز هیچ شکلی داخل آن قرار نداده‌ایم.
رسم مستطیل با SVG
یکی از ساده‌ترین شکل‌ها در SVG، مستطیل است.
برای این کار از:
<rect>استفاده می‌کنیم.
مثال:
<svg width="400" height="300">
<rect
x="50"
y="50"
width="200"
height="100">
</rect>
</svg>یا می‌توانیم آن را کوتاه‌تر بنویسیم:
<svg width="400" height="300">
<rect
x="50"
y="50"
width="200"
height="100" />
</svg>عنصر rect برای رسم مستطیل استفاده می‌شود.
مختصات مستطیل
در مثال قبلی:
<rect
x="50"
y="50"
width="200"
height="100" />مقادیر زیر را داریم:
x = 50
y = 50
width = 200
height = 100یعنی گوشه بالای سمت چپ مستطیل در مختصات:
(50, 50)قرار دارد.
و اندازه آن:
عرض = 200
ارتفاع = 100است.
تغییر رنگ با fill
برای تعیین رنگ داخل یک شکل می‌توانیم از:
fillاستفاده کنیم.
مثلاً:
<svg width="400" height="300">
<rect
x="50"
y="50"
width="200"
height="100"
fill="orange" />
</svg>حالا مستطیل نارنجی خواهد بود.
ایجاد حاشیه با stroke
برای ایجاد حاشیه اطراف شکل از:
strokeاستفاده می‌کنیم.
مثلاً:
<svg width="400" height="300">
<rect
x="50"
y="50"
width="200"
height="100"
fill="orange"
stroke="black" />
</svg>حالا مستطیل هم رنگ داخلی دارد و هم حاشیه.
تغییر ضخامت حاشیه
برای تغییر ضخامت حاشیه می‌توانیم از:
stroke-widthاستفاده کنیم.
مثال:
<svg width="400" height="300">
<rect
x="50"
y="50"
width="200"
height="100"
fill="orange"
stroke="black"
stroke-width="5" />
</svg>حالا حاشیه ضخیم‌تر می‌شود.
گوشه‌های گرد
یکی از قابلیت‌های جالب rect امکان گرد کردن گوشه‌ها است.
برای این کار از:
rxاستفاده می‌کنیم.
مثال:
<svg width="400" height="300">
<rect
x="50"
y="50"
width="200"
height="100"
rx="20"
fill="orange" />
</svg>گوشه‌های مستطیل گرد می‌شوند.
SVG برای rect ویژگی‌های x، y، width، height، rx و ry را برای کنترل موقعیت، اندازه و گوشه‌ها ارائه می‌کند.
رسم دایره
برای رسم دایره از:
<circle>استفاده می‌کنیم.
مثال:
<svg width="400" height="300">
<circle
cx="200"
cy="150"
r="80"
fill="blue" />
</svg>در اینجا:
cx = موقعیت افقی مرکز
cy = موقعیت عمودی مرکز
r = شعاعاست.
دایره با حاشیه
می‌توانیم حاشیه هم اضافه کنیم:
<svg width="400" height="300">
<circle
cx="200"
cy="150"
r="80"
fill="orange"
stroke="black"
stroke-width="5" />
</svg>رسم بیضی
برای رسم بیضی از:
<ellipse>استفاده می‌کنیم.
مثال:
<svg width="400" height="300">
<ellipse
cx="200"
cy="150"
rx="120"
ry="70"
fill="green" />
</svg>در اینجا:
cx = مرکز افقی
cy = مرکز عمودی
rx = شعاع افقی
ry = شعاع عمودیاست.
رسم خط
برای رسم خط از:
<line>استفاده می‌کنیم.
مثال:
<svg width="400" height="300">
<line
x1="50"
y1="50"
x2="350"
y2="250"
stroke="red"
stroke-width="5" />
</svg>در اینجا:
x1 , y1نقطه شروع و:
x2 , y2نقطه پایان خط هستند.
چندضلعی با polygon
می‌توانیم با polygon چندضلعی ایجاد کنیم.
مثلاً یک مثلث:
<svg width="400" height="300">
<polygon
points="200,40 350,250 50,250"
fill="orange"
stroke="black"
stroke-width="4" />
</svg>در ویژگی:
pointsمختصات نقاط را مشخص می‌کنیم.
در این مثال سه نقطه داریم:
(200,40)
(350,250)
(50,250)SVG این نقاط را به هم متصل می‌کند و شکل را می‌سازد.
تفاوت Polygon و Polyline
دو عنصر مهم وجود دارند:
<polygon>و:
<polyline>هر دو می‌توانند از مجموعه‌ای از نقاط تشکیل شوند.
تفاوت اصلی این است که polygon مسیر را به صورت بسته کامل می‌کند؛ یعنی نقطه آخر را به نقطه اول متصل می‌کند.
مثال:
<polygon
points="50,50 150,50 100,150"
fill="orange" />اما polyline بیشتر برای ایجاد مسیرهای باز استفاده می‌شود.
رسم مسیر با path
یکی از قدرتمندترین عناصر SVG:
<path>است.
path می‌تواند برای ایجاد:
خطوط
منحنی‌ها
مسیرهای پیچیده
شکل‌های سفارشی
استفاده شود.
مثال ساده:
<svg width="400" height="300">
<path
d="M 50 50 L 300 50 L 200 200 Z"
fill="orange"
stroke="black" />
</svg>d در Path چیست؟
ویژگی:
d
مسیر path را تعریف می‌کند.
مثلاً:
M 50 50یعنی از نقطه مشخص‌شده شروع کن.
و:
L 300 50یعنی یک خط به این نقطه بکش.
و:
Zیعنی مسیر را ببند.
در ابتدا لازم نیست تمام دستورات path را حفظ کنید.
مهم این است که بدانید:
path
↓
یک مسیر قابل کنترلایجاد می‌کند.
سیستم مختصات SVG
مانند Canvas، SVG نیز یک سیستم مختصات دارد.
به طور معمول نقطه:
(0,0)در گوشه بالا سمت چپ قرار می‌گیرد.
مثلاً:
(0,0)
┌──────────────────→ X
│
│
│
↓
Yبنابراین:
xمقدار حرکت به سمت راست را مشخص می‌کند و:
yمقدار حرکت به سمت پایین را مشخص می‌کند.
width و height
می‌توانیم اندازه فضای SVG را مشخص کنیم:
<svg
width="500"
height="300">
</svg>
یعنی فضای نمایش SVG:
عرض = 500
ارتفاع = 300
خواهد داشت.
viewBox چیست؟
یکی از مهم‌ترین ویژگی‌های SVG:
viewBoxاست.
در ابتدا ممکن است کمی عجیب به نظر برسد، اما مفهوم آن ساده است.
viewBox یک سیستم مختصات داخلی برای SVG مشخص می‌کند. مقدار آن از چهار عدد تشکیل می‌شود:
min-x
min-y
width
heightمثلاً:
<svg
width="500"
height="300"
viewBox="0 0 500 300">
</svg>یعنی محدوده مختصات داخلی SVG از:
x = 0
y = 0
شروع می‌شود و:
width = 500
height = 300است.
چرا viewBox مهم است؟
فرض کنید بنویسیم:
<svg
width="600"
height="400"
viewBox="0 0 300 200">در این حالت:
اندازه ظاهری:
600 × 400اما سیستم مختصات داخلی:
300 × 200است.
مرورگر این سیستم مختصات را به فضای نمایش SVG نگاشت می‌کند.
به همین دلیل viewBox یکی از ویژگی‌های بسیار مهم برای ساخت SVGهای قابل مقیاس است.
یک مثال با ViewBox
<svg
width="600"
height="400"
viewBox="0 0 300 200">
<rect
x="50"
y="50"
width="100"
height="60"
fill="orange" />
</svg>در این مثال مختصات مستطیل بر اساس سیستم:
300 × 200محاسبه می‌شود.
اما SVG در صفحه با اندازه:
600 × 400
نمایش داده می‌شود.
SVG می‌تواند Responsive باشد
یکی از مزایای مهم SVG این است که می‌توانیم از viewBox همراه با اندازه‌های انعطاف‌پذیر استفاده کنیم.
مثلاً:
<svg
width="100%"
viewBox="0 0 500 300">
<rect
x="50"
y="50"
width="400"
height="200"
fill="orange" />
</svg>در این حالت SVG می‌تواند متناسب با فضای در دسترس تغییر اندازه دهد.
رسم متن در SVG
SVG می‌تواند متن نیز نمایش دهد.
برای این کار از:
<text>استفاده می‌کنیم.
مثال:
<svg
width="500"
height="300">
<text
x="100"
y="100"
font-size="32">
بنو سرویس
</text>
</svg>تغییر رنگ متن
می‌توانیم از fill استفاده کنیم:
<svg
width="500"
height="300">
<text
x="100"
y="100"
font-size="32"
fill="orange">
بنو سرویس
</text>
</svg>SVG و CSS
یکی از ویژگی‌های مهم SVG این است که می‌توانیم ظاهر آن را با CSS کنترل کنیم.
مثلاً:
<svg
class="logo"
viewBox="0 0 300 200">
<circle
cx="150"
cy="100"
r="80" />
</svg>و در CSS:
.logo circle {
fill: orange;
stroke: black;
stroke-width: 5;
}SVG و CSS می‌توانند با یکدیگر استفاده شوند و این موضوع در طراحی رابط کاربری و آیکون‌ها بسیار کاربردی است.
استفاده از SVG به عنوان فایل جداگانه
SVG فقط به صورت مستقیم داخل HTML استفاده نمی‌شود.
می‌توانیم یک فایل جداگانه مانند:
logo.svg
داشته باشیم.
و سپس آن را مانند یک تصویر نمایش دهیم:
<img
src="logo.svg"
alt="لوگو">این روش برای استفاده از لوگوها و تصاویر برداری بسیار رایج است.
SVG می‌تواند مستقیماً در مرورگر نمایش داده شود یا از طریق عناصری مانند img در HTML قرار بگیرد.
SVG داخلی و SVG خارجی
به طور کلی دو روش رایج داریم.
SVG داخلی
<svg viewBox="0 0 100 100">
<circle
cx="50"
cy="50"
r="40"
fill="orange" />
</svg>SVG خارجی
<img
src="logo.svg"
alt="لوگو">در روش داخلی، عناصر SVG مستقیماً داخل ساختار HTML قرار دارند و می‌توانیم آن‌ها را با CSS و JavaScript کنترل کنیم.
ساخت یک آیکون ساده
بیایید یک آیکون ساده با SVG ایجاد کنیم.
<svg
width="200"
height="200"
viewBox="0 0 200 200">
<circle
cx="100"
cy="100"
r="80"
fill="orange" />
<circle
cx="70"
cy="80"
r="10"
fill="black" />
<circle
cx="130"
cy="80"
r="10"
fill="black" />
<path
d="M 60 120 Q 100 160 140 120"
fill="none"
stroke="black"
stroke-width="6" />
</svg>در این مثال یک شکل ساده شبیه صورت ایجاد کرده‌ایم.
ترتیب عناصر در SVG
به ترتیب عناصر دقت کنید:
<circle ... />
<circle ... />
<circle ... />
<path ... />در SVG عناصر بعدی معمولاً روی عناصر قبلی رسم می‌شوند.
بنابراین ترتیب قرار گرفتن عناصر می‌تواند روی ظاهر نهایی تصویر تأثیر بگذارد.
SVG و Canvas چه تفاوتی دارند؟
حالا که هر دو فناوری را می‌شناسیم، مقایسه آن‌ها بسیار مهم است.
ویژگی | SVG | Canvas |
|---|---|---|
نوع گرافیک | برداری | رسم روی بوم |
ساختار | عنصر و شکل | پیکسل‌های سطح رسم |
استفاده از HTML | بله | بله |
نیاز به JavaScript برای رسم پایه | خیر | معمولاً بله |
مناسب برای لوگو | بسیار مناسب | معمولاً انتخاب اول نیست |
مناسب برای آیکون | بسیار مناسب | ممکن است |
مناسب برای بازی دوبعدی | ممکن است | بسیار مناسب |
قابلیت کنترل عناصر به صورت جداگانه | مناسب | نیازمند مدیریت در کد |
مناسب برای شکل‌های هندسی | بسیار مناسب | مناسب |
این جدول یک قانون مطلق نیست؛ انتخاب فناوری به نوع پروژه بستگی دارد.
یک تفاوت مهم بین SVG و Canvas
در SVG وقتی یک دایره ایجاد می‌کنیم:
<circle
id="circle1"
cx="100"
cy="100"
r="50" />این دایره یک عنصر مستقل در ساختار SVG است.
می‌توانیم آن را با CSS یا JavaScript پیدا و تغییر دهیم.
اما در Canvas وقتی یک دایره رسم می‌کنیم، نتیجه به عنوان یک عنصر HTML مستقل مانند <circle> در DOM وجود ندارد.
این یکی از تفاوت‌های مفهومی مهم بین این دو فناوری است.
چه زمانی SVG انتخاب خوبی است؟
SVG معمولاً انتخاب مناسبی برای مواردی مانند:
لوگو
آیکون
نمودارهای برداری
تصاویر ساده و هندسی
نقشه‌های برداری
نمودارهای تعاملی
اشکال قابل مقیاس
است.
چه زمانی Canvas انتخاب بهتری است؟
Canvas می‌تواند برای مواردی مانند:
بازی‌های دوبعدی
نقاشی آزاد
پردازش و نمایش گرافیک
انیمیشن‌های گرافیکی خاص
پروژه‌هایی که تعداد زیادی عملیات رسم دارند
مناسب باشد.
انتخاب نهایی به نیاز پروژه بستگی دارد.
اشتباهات رایج در SVG
اشتباه اول: تصور اینکه SVG همان PNG است
SVG و PNG ساختار یکسانی ندارند.
PNG یک تصویر پیکسلی است، اما SVG یک گرافیک برداری ساختاریافته است.
اشتباه دوم: نادیده گرفتن viewBox
در پروژه‌های واقعی، viewBox یکی از ویژگی‌های بسیار مهم SVG است.
اگر هدف شما ساخت SVG قابل مقیاس باشد، باید مفهوم آن را به خوبی یاد بگیرید.
اشتباه سوم: استفاده اشتباه از مختصات
مثلاً:
<circle
cx="500"
cy="500"
r="50">
</circle>اگر SVG شما فقط:
200 × 200باشد، احتمالاً دایره خارج از محدوده قابل مشاهده قرار می‌گیرد.
پس باید مختصات را با فضای SVG هماهنگ کنیم.
اشتباه چهارم: استفاده از SVG برای هر چیزی
SVG ابزار بسیار قدرتمندی است، اما به این معنی نیست که برای همه پروژه‌ها بهترین انتخاب است.
گاهی CSS کافی است.
گاهی یک تصویر معمولی بهتر است.
گاهی Canvas مناسب‌تر است.
یک پروژه کوچک SVG
حالا یک مثال کامل‌تر بسازیم.
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>پروژه SVG</title>
</head>
<body>
<h1>نمونه SVG</h1>
<svg
width="600"
height="400"
viewBox="0 0 600 400">
<!-- پس‌زمینه -->
<rect
width="600"
height="400"
fill="#f2f2f2" />
<!-- خورشید -->
<circle
cx="480"
cy="100"
r="60"
fill="orange" />
<!-- خانه -->
<rect
x="150"
y="180"
width="250"
height="150"
fill="#eeeeee"
stroke="black"
stroke-width="4" />
<!-- سقف -->
<polygon
points="120,180 275,60 430,180"
fill="#d35400"
stroke="black"
stroke-width="4" />
<!-- در -->
<rect
x="250"
y="240"
width="60"
height="90"
fill="#8e5a3c" />
<!-- پنجره -->
<rect
x="180"
y="220"
width="50"
height="50"
fill="#87ceeb"
stroke="black"
stroke-width="3" />
<!-- متن -->
<text
x="275"
y="370"
font-size="28"
text-anchor="middle">
خانه من
</text>
</svg>
</body>
</html>در این مثال چند مفهوم را کنار هم قرار دادیم:
SVG
├── rect
├── circle
├── polygon
├── text
├── fill
├── stroke
├── stroke-width
└── viewBoxدسترسی‌پذیری در SVG
اگر SVG یک تصویر یا گرافیک معنادار باشد، بهتر است اطلاعات مناسبی برای فناوری‌های کمکی فراهم کنیم.
برای مثال می‌توان داخل SVG از:
<title>استفاده کرد.
مثال:
<svg
viewBox="0 0 200 200"
role="img">
<title>
لوگوی بنو سرویس
</title>
<circle
cx="100"
cy="100"
r="80"
fill="orange" />
</svg>title می‌تواند یک توضیح کوتاه برای گرافیک فراهم کند. در SVGهای معنادار می‌توان از الگوهای دسترسی‌پذیری مانند role="img" و عنوان مناسب استفاده کرد.
تمرین عملی اول
یک SVG با اندازه:
500 × 300ایجاد کنید.
سپس:
یک مستطیل رسم کنید.
رنگ آن را تغییر دهید.
برای آن حاشیه ایجاد کنید.
ضخامت حاشیه را تغییر دهید.
گوشه‌های آن را گرد کنید.
تمرین عملی دوم
یک SVG ایجاد کنید و داخل آن:
یک دایره
یک بیضی
یک خط
یک مثلث
قرار دهید.
برای هرکدام رنگ متفاوتی انتخاب کنید.
تمرین عملی سوم
یک آیکون ساده با SVG طراحی کنید.
مثلاً:
صورت خندانیا:
خانهیا:
ابراز شکل‌های ساده‌ای مانند:
circle
rect
polygon
path
استفاده کنید.
تمرین عملی چهارم
یک SVG با:
viewBox="0 0 500 300"
بسازید.
سپس:
width="100%"
را برای آن قرار دهید و صفحه را کوچک و بزرگ کنید.
بررسی کنید SVG چگونه متناسب با فضای موجود تغییر اندازه می‌دهد.
چالش
یک تصویر ساده از یک خانه با SVG بسازید.
تصویر شما باید شامل موارد زیر باشد:
آسمان
خورشید
خانه
سقف
در
حداقل یک پنجره
زمین
یک متن کوتاه
سعی کنید تمام شکل‌ها را با عناصر SVG بسازید.
برای مثال:
rect
circle
polygon
line
text
و در نهایت از:
viewBox
استفاده کنید.
نکات مهم این مقاله
در این مقاله یاد گرفتیم:
SVG مخفف Scalable Vector Graphics است.
SVG برای ایجاد گرافیک برداری استفاده می‌شود.
SVG را می‌توان مستقیماً داخل HTML قرار داد.
SVG را می‌توان به صورت فایل جداگانه با پسوند
.svgنیز استفاده کرد.rectبرای مستطیل است.circleبرای دایره است.ellipseبرای بیضی است.lineبرای خط است.polygonبرای چندضلعی است.polylineبرای مسیرهای متشکل از خطوط است.pathبرای مسیرهای پیچیده‌تر استفاده می‌شود.textبرای نمایش متن در SVG است.fillرنگ داخلی شکل را مشخص می‌کند.strokeرنگ حاشیه را مشخص می‌کند.stroke-widthضخامت حاشیه را تعیین می‌کند.xوyبرای تعیین موقعیت بسیاری از شکل‌ها استفاده می‌شوند.cxوcyمرکز دایره یا بیضی را مشخص می‌کنند.rشعاع دایره را مشخص می‌کند.viewBoxسیستم مختصات داخلی و محدوده دید SVG را مشخص می‌کند.SVG می‌تواند با CSS ترکیب شود.
SVG برای لوگوها و آیکون‌ها بسیار کاربردی است.
SVG و Canvas دو روش متفاوت برای کار با گرافیک در وب هستند.
جمع‌بندی
SVG یکی از مهم‌ترین ابزارهای ایجاد گرافیک در وب است. برخلاف تصاویر پیکسلی، SVG شکل‌ها را به صورت برداری و ساختاریافته توصیف می‌کند و به همین دلیل برای بسیاری از موارد مانند لوگو، آیکون، نمودار و تصاویر هندسی گزینه بسیار مناسبی است.
در این مقاله ابتدا مفهوم SVG را یاد گرفتیم و سپس با عناصر مهمی مانند rect، circle، ellipse، line، polygon، path و text کار کردیم. همچنین با ویژگی‌هایی مانند fill، stroke و stroke-width آشنا شدیم و مفهوم مهم viewBox را بررسی کردیم.
در مقاله بعدی به سراغ یکی از قابلیت‌های جالب HTML5 یعنی Geolocation می‌رویم و یاد می‌گیریم مرورگر چگونه می‌تواند در صورت اجازه کاربر، موقعیت مکانی او را در اختیار صفحه وب قرار دهد.
مقاله بعدی: «Geolocation در HTML5»
نظرات
هنوز نظری ثبت نشده است.