آموزش HTML - گرافیک SVG

گرافیک SVG در HTML

HTML SVG (Scalable Vector Graphics) برای تعریف گرافیک‌های برداری در XML استفاده می‌شود که می‌توان آن‌ها را درون صفحات HTML گنجاند. SVG با تصاویر معمولی متفاوت است زیرا حتی هنگام بزرگ‌نمایی نیز کیفیت خود را حفظ می‌کند.

XML اختصاری برای Extensible Markup Language (زبان نشانه‌گذاری توسعه‌پذیر) است و یک زبان توصیف داده محسوب می‌شود. این زبان هیچ تگ از پیش تعریف‌شده‌ای ندارد؛ بنابراین کاربران باید بر اساس نیاز خود تگ‌هایشان را تعریف کنند.

SVG چیست؟

• SVG مخفف Scalable Vector Graphics (گرافیک برداری مقیاس‌پذیر) است.
• SVG به ما کمک می‌کند تا انواع تصاویر را با استفاده از کدنویسی XML رسم کنیم.
• بزرگ‌نمایی یک بردار XML باعث از دست رفتن کیفیت آن نمی‌شود.
• این ابزار بیشتر برای نمودارهای برداری مانند نمودارهای دایره‌ای و نمودارهای دو بعدی در سیستم مختصات X, Y کاربرد دارد.
• SVG در ۱۴ ژانویه ۲۰۰۳ به توصیه رسمی W3C تبدیل شد.

تفاوت تصویر بیتی (Bitmap) و گرافیک برداری مقیاس‌پذیر (SVG)

فایل‌های PNG، GIF و JPG گرافیک‌های بیتی (بیت‌مپ) هستند و فایل‌های SVG گرافیک‌های برداری محسوب می‌شوند. تفاوت اصلی بین این دو در این است که گرافیک‌های بیتی از شبکه‌ای از پیکسل‌های کوچک تشکیل شده‌اند، اما گرافیک‌های برداری با کدنویسی تعریف می‌شوند؛ به همین دلیل گرافیک‌های برداری پس از بزرگ‌نمایی کیفیت خود را از دست نمی‌دهند.

چگونه از SVG در HTML استفاده کنیم؟

شما می‌توانید به دو روش از گرافیک‌های SVG استفاده کنید (آن‌ها را درون صفحه بگنجانید):

• با استفاده از تگ <img>
• با استفاده از تگ <svg>

۱. گنجاندن SVG در HTML با استفاده از تگ <img>

شما می‌توانید یک فایل SVG را در سند HTML با استفاده از تگ <img> و با مشخص کردن نام فایل به همراه مسیر آن در ویژگی src قرار دهید. همچنین می‌توانید یک آدرس اینترنتی (URL) مستقیم به تصویر SVG بدهید.

مثال

یک فایل SVG را می‌توان به صورت زیر گنجاند:

<img src = "svg_file_name.svg" alt="Alternate Text" />

۲. گنجاندن SVG در HTML با استفاده از تگ <svg>

زبان HTML امکان گنجاندن مستقیم SVG را با استفاده از تگ <svg>...</svg> فراهم می‌کند که دارای ساختار زیر است:

ساختار (Syntax)

<svg>
   <!-- code to create graphics -->
</svg>

عناصر از پیش تعریف‌شده SVG برای رسم اشکال

عناصر از پیش تعریف‌شده‌ای در SVG وجود دارند که برای رسم اشکال مختلف مانند دایره، مستطیل، خط و غیره استفاده می‌شوند. این عناصر به شرح زیر هستند:

تگ <svg> عنصر سطح بالا (ریشه) برای تگ‌های ذکر شده در بالا است. این تگ‌ها در داخل عنصر SVG تعریف می‌شوند.

ویژگی‌های مشترک عناصر SVG

جدول زیر شامل فهرستی از ویژگی‌های (Attributes) عناصر SVG است:

رسم دایره در SVG با استفاده از تگ <circle>

مثال SVG زیر نحوه رسم یک دایره را با استفاده از تگ <circle> در داخل یک عنصر SVG نشان می‌دهد. در اینجا، cx نشان‌دهنده مختصات x گوشه بالا-چپ دایره و cy نشان‌دهنده مختصات y گوشه بالا-راست دایره است.

مثال

<!DOCTYPE html>
<html>

<head>
   <title>SVG-Circle</title>
</head>

<body>
   <h2>HTML SVG Circle</h2>
   <svg height="500" >
      <circle cx="50" 
              cy="50" 
              r="50" 
              fill="red" />
   </svg>
</body>

</html>

رسم مستطیل در SVG با استفاده از تگ <rect>

مثال SVG زیر نحوه رسم یک مستطیل را با استفاده از تگ <rect> نشان می‌دهد. ویژگی‌های height و width برای تعریف ابعاد مستطیل استفاده می‌شوند.

مثال

<!DOCTYPE html>
<html>

<head>
   <title>SVG Rectangle</title>
</head>

<body>
   <h2>HTML SVG Rectangle</h2>
   <svg height = "200">
      <rect width = "300" 
            height = "100" 
            fill = "red" />
   </svg>

</body>
</html>

رسم خط در SVG با استفاده از تگ <line>

مثال SVG زیر نحوه رسم یک خط را با استفاده از تگ <line> و مختصات دو نقطه داده شده (x1, y1 و x2, y2) نشان می‌دهد. از ویژگی style نیز می‌توان برای تنظیم استایل‌های اضافی مانند رنگ خط، رنگ پرکننده، ضخامت خط و موارد دیگر استفاده کرد.

مثال

<!DOCTYPE html>
<html>

<head>
   <title>SVG Line</title>
</head>

<body>
   <h2>HTML SVG Line</h2>		
   <svg  height="200">
      <line x1="0" y1="0" 
            x2="200" y2="100" 
            style="stroke:red;stroke-width:2"/>
   </svg>

</body>
</html>

رسم بیضی در SVG با استفاده از تگ <ellipse>

مثال SVG زیر نحوه رسم یک بیضی را با استفاده از تگ <ellipse> نشان می‌دهد. در اینجا، cx و cy نشان‌دهنده مختصات مرکز بیضی هستند، در حالی که rx و ry به ترتیب شعاع‌ها را در امتداد محور x و محور y تعریف می‌کنند.

مثال

<!DOCTYPE html>
<html>

<head>
   <title>SVG Ellipse</title>
</head>

<body>
   <h2>HTML SVG Ellipse</h2>
   <svg height="200">
      <ellipse cx="100" cy="50" 
               rx="100" ry="50" 
               fill="red" />
   </svg>
   
</body>
</html>

رسم چندضلعی در SVG با استفاده از تگ <polygon>

مثال SVG زیر نحوه رسم یک بیضی را با استفاده از تگ <ellipse> نشان می‌دهد. در اینجا، cx و cy نشان‌دهنده مختصات مرکز بیضی هستند، در حالی که rx و ry به ترتیب شعاع‌ها را در امتداد محور x و محور y تعریف می‌کنند.

مثال

<!DOCTYPE html>
<html>

<head>
   <title>SVG</title>
</head>

<body>
   <h2>HTML SVG Polygon</h2>
   <svg height="200">
      <polygon points="20,10, 300,20, 170,50, 130,70" 
               fill="red" />
   </svg>

</body>

</html>

رسم خط چندپاره در SVG با استفاده از تگ <polyline>

مثال SVG زیر نحوه رسم یک خط چندپاره را با استفاده از تگ <polyline> نشان می‌دهد. مختصات نقاط متصل به هم در ویژگی points از تگ <polyline> قرار داده می‌شوند.

مثال

<!DOCTYPE html>
<html>

<head>
   <title>SVG Polyline</title>
</head>

<body>
   <h2>HTML SVG Polyline</h2>
   <svg height="200">
      <polyline points="0,0 0,30 30,30 30,60 60,60" 
                fill="red" />
   </svg>
</body>

</html>

اعمال گرادیان رنگ پرکننده بر روی اشکال در SVG

مثال SVG زیر نحوه رسم یک بیضی را با استفاده از تگ <ellipse> و استفاده از تگ <radialGradient> برای تعریف یک گرادیان شعاعی SVG نشان می‌دهد.

به همین ترتیب، می‌توانید از تگ <linearGradient> برای ایجاد یک گرادیان خطی SVG استفاده کنید.

مثال

<!DOCTYPE html>
<html>

<head>
   <title>SVG</title>
</head>

<body>
   <h2>HTML SVG Gradient Ellipse</h2>
   <svg height="200">
      <defs>
         <radialGradient id="gradient" 
                         cx="50%" cy="50%" 
                         r="50%" 
                         fx="50%" fy="50%">
            <stop offset="0%" 
                  style="stop-color:rgb(200,200,200);"/>
            <stop offset="100%" 
                  style="stop-color:rgb(0,0,255);"/>
         </radialGradient>
      </defs>
      <ellipse cx="100" cy="50" 
               rx="100" ry="50" 
               style="fill:url(#gradient)" />
   </svg>
</body>

</html>

رسم ستاره در SVG با استفاده از تگ <polygon>

مثال SVG زیر نحوه رسم یک چندضلعی را با استفاده از تگ <polygon> نشان می‌دهد. مختصات رأس‌های چندضلعی در ویژگی points تگ <polygon> مشخص می‌شوند. هر نقطه با یک جفت (x, y) تعریف می‌شود و نقاط برای شکل‌دهی به تصویر به هم متصل می‌شوند.

مثال

<!DOCTYPE html>
<html>

<head>
   <title>SVG star</title>
</head>

<body>	
   <h2>HTML SVG Star</h2>
   <svg height="200">
      <polygon points="100,5 40,180 190,60 10,60 160,180" 
               fill="red"/>
   </svg>

</body>
</html>