بخش های اصلی

آموزش HTML 5

آموزش HTML 5 - آموزش SVG

SVG مخفف گرافیک برداری مقیاس پذیره (Scalable Vector Graphics)

svg چیه؟

گرافیک های برداری مقیاس پذیر (SVG) یک فرمتِ عکسِ مبتنی بر XML است که برای تعریف یک وکتورِ دو بعدیِ مبتنی بر گرافیک برای وب، به کار میره. می توانید مقیاس یک عکس وکتور را تا هر اندازه که بخواین بزرگ و کوچک کنین بدون این که کیفیت عکس پایین بیاد.

عکس های SVG و رفتارهایشان (behaviors) در فایل های XML تعریف میشن – این به این معنیِه که عکس هایِ SVG قابل ایجاد و ویرایش شدن در هر ویرایشگر متنی هستن. استفاده از عکس های SVG نسبت به استفاده از دیگر فرمت های عکس مثلِ JPEG، PNG، GIF و ... مزایای زیادی داره.

  • عکس های SVG قابل جستجو شدن، شاخص گذاری شدن (indexed)،اسکریپت شدن و فشرده شدن هستن.
  •      عکس های SVG را می توان با جاوا اسکریپت بصورت زمان-واقعی ایجاد کرد یا تغییر داد.
  •      عکس هایِ SVG را می توان با هر رزولیشنی (وضوح تصویر) و با کیفیت بالا چاپ کرد.
  •      می توان محتوایِ SVG را با استفاده از عناصرِ animation تعبیه شده ی داخلی، متحرک کرد.
  •      عکس هایِ SVG می توانند حاوی لینک (hyperlink) به اسناد دیگه باشن.

نکته: عکس های وکتور از مجموعه ی ثابتی از شکل هایی تشکیل شدن که توسط ریاضیات تعریف شدن، در حالی که عکس هایِ bitmap یا raster از مجموعه ی ثابتی از نقطه ها تشکیل شدن که پیکسل نامیده میشن.

گذاشتنِ SVG در صفحه های HTML

می توانید با استفاده از عنصرِ HTML5 <svg>، گرافیک هایِ SVG را مستقیماً در سندها قرار بدین.

مثال

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5 SVG</title>
</head>
<body>
    <svg width="300" height="200">
        <text x="10" y="20" style="font-size:14px;">
            Your browser support SVG.
        </text>
        Sorry, your browser does not support SVG.
    </svg>
</body>
</html>

نکته: همه ی مرورگرهای مطرح امروزی مثل Firefox, Chrome, Safari, Opera و Internet Explorer 9+ از رِندِرِ SVGیِ درون خطی (inline) پشتیبانی می کنن.

کشیدن خط و اشکال با SVG

بخش زیر با استفاده از عنصرِ HTML5 <svg>، نحوه ی کشیدن pathهایِ ابتداییِ مبتنی بر وکتور و شکل ها را در صفحه های وب توضیح میده.

کشیدن خط

ابتدایی ترین pathای که می توانید با SVG بکشین، خط است. مثال زیر، با استفاده از عنصر SVGیِ <line>، نحوه ی ایجاد خط راست را توضیح میده.

مثال

<svg width="300" height="200">
    <line x1="50" y1="50" x2="250" y2="150" style="stroke:red; stroke-width:3;" />
</svg>

خصیصه های (attributes) x1، x2، y1 و y2یِ عنصرِ <line>، خطی را از (x1,x2) تا (y1,y2) میکشن.

کشیدن مستطیل

میتوانید با استفاده از عنصر SVG <rect> شکل های ساده ی مستطیل و مربع ایجاد کنین. مثال زیر با کمک SVG ، روش ایجاد و استایل دادن به یک شکل مستطیل شکل را نشان میده.

مثال

<svg width="300" height="200">
    <rect x="50" y="50" width="200" height="100" style="fill:orange; stroke:black; stroke-width:3;" />
</svg>

در عنصر <rect> خصیصه های (attributes) x و y مختصات گوشه ی بالا، سمت چپِ مستطیل را تعیین می کنن. خصیصه های width و heigth، عرض و ارتفاع شکل را تعیین می کنن.

کشیدن دایره

می توانید با استفاده از عنصر SVG <circle>، شکل دایره ایجاد کنین. مثال زیر روش ایجاد و استایل دادن به یک شکل دایره ای با استفاده از SVG را نشان میده.

مثال

<svg width="300" height="200">
    <circle cx="150" cy="100" r="70" style="fill:lime; stroke:black; stroke-width:3;" />
</svg>

در عنصر <circle>، خصیصه های cx و cy مختصات وسط دایره را تعیین می کنن و خصیصه ی r، شعاعِ دایره را مشخص می کنه. اگه خصیصه های cx و cy حذف شده یا تعریف نشده باشن، مختصات وسط دایره (0 , 0) خواهد بود.

ایجاد متن با  SVG

می توانید با استفاده از SVG، در صفحه های وب تان، متن هم بنویسید. متن در SVG، بصورت گرافیک رِندِر میشه بنابراین می توانید همه ی تغییر شکل های (transformation) گرافیک را به آن اعمال کنین در حالی که هنوز هم مثل متن عمل می کنه- این به این معنیِه که کاربر می تواند مثل متن آن را انتخاب و کپی کنه.

مثال

<svg width="300" height="200">
    <text x="20" y="30" style="fill:purple; font-size:22px;">
        Welcome to Our Website!
    </text>
    <text x="20" y="30" dx="0" dy="20" style="fill:navy; font-size:14px;">
        Here you will find lots of useful information.
    </text>
</svg>

در عنصر <text>، خصیصه های x و y، مکانِ گوشه ی بالا، سمت چپ را در موارد مطلق (absolute) تعیین می کنن، در حالی که خصیصه های dx و dy، مکان نسبی (relative) را مشخص می کنن.

می توانید از عنصر <tspan> برای تغییر فرمت (reformat) یا تغییر مکانِ (reposition) محدوده ی (span) متنی که در عنصر <text> قرار دارد، استفاده کنین. متنی که در tspanهای جداگانه قرار داره، ولی داخل یک عنصر text مشابه باشه، تمامش می تواند یکباره انتخاب بشه- زمانی که برای انتخاب متن، کلیک و درگ می کنین. در حالی که متنی که داخل عنصرهای text جداگانه باشه، نمی تواند همزمان انتخاب بشه.

مثال

<svg width="300" height="200">
    <text x="30" y="15" style="fill:purple; font-size:22px; transform:rotate(30deg);">
        <tspan style="fill:purple; font-size:22px;">
            Welcome to Our Website!
        </tspan>
        <tspan dx="-230" dy="20" style="fill:navy; font-size:14px;">
            Here you will find lots of useful information.
        </tspan>
    </text>
</svg>

تفاوت SVG و Canvas

HTML5 دو عنصر Canvas و SVG را برای ایجاد گرافیک های قدرتمند در وب معرفی می کنه، ولی این دو اساساً با هم فرق می کنن. جدول زیر بعضی از تفاوت های اساسی میان این دو عنصر را به طور خلاصه بیان می کنه که به شما کمک می کنه تا روش استفاده ی مؤثر و مناسب از عناصر Canvas و SVG را یاد بگیرین.

Canvas

SVG

مبتنی بر رِستری (تشکیل شده از پیکسل)

مبتنی بر وکتور (تشکیل شده از اشکال)

عنصرِ HTML تکی، که در رفتارش مشابه <img> است

عناصر گرافیکیِ چندگانه، که بخشی از DOM هستن

فقط با اسکریپت تغییر می کنه

با اسکریپت و CSS تغییر می کنه

با سطح کوچک تر یا اشیا ء بیشتر یا هردوی این ها کارایی بهتری داره

با اشیاء کمتر یا سطوح بزرگ تر یا هر دوی این ها کارایی بهتری داره

مقیاس پذیری کم- برای چاپ در وضوح بالا مناسب نیست

مقیاس پذیری بهتر- می تواند با کیفیت بالا و با هر وضوحی چاپ بشه

در صورتی که سوال و یا نظری دارید، از بخش نظرات با ما در میان بگذارید.

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

آموزش HTML 5

Learn HTML 5

سرفصل ها

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

تبلیغات

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد