آموزش SVG در HTML5

منتشرشده در آموزش HTML5
چهارشنبه, 01 بهمن 1393 ساعت 12:06

آموزش کد درون خطی SVG در HTML5   

SVG مخفف Scalable Vector Graphics  زبانی برای توصیف گرافیک های دوبعدی (2D-graphics) و تعریف تصاویر گرافیکی در فرمت XML ،برای ایجاد بردار و تصاویر گرافیکی مبتنی بر بردار و نمودار در وب از SVG استفاده می شود.

SVG در تاریخ 14. January 2003 توسط W3C توصیه شد.

 مزایای  SVG   

تصاویر SVG نسبت به سایر تصاویر از قبیل GIF,JPG و PNG دارای مزیت هایی به شرح زیر است:

- تصاویر SVG  را با هر ویرایشگر متنی می توان ایجاد کرد.
- تصاویر SVG می توانند مورد جستجو قرار می گیرند ( در موتور های جستجوایندکس شوند) ، فشرده می شوند و به راحتی در اسکریپت نویسی به کار می روند.
- تصاویر SVG  قابلیت مقیاس پذیری دارند.
- تصاویر SVG  قابلیت زوم دارند و می توانند بدون افت کیفیت بزرگ شوند.
- تصاویر SVG  در هر رزولوشنی (دقت تصویری) می توانند با کیفیت بالا چاپ شوند.

مشاهده فایل های SVG

بسیاری از مرورگرهای وب می توانند تصاویر SVG را نمایش دهند مانند تصاویر  PNG، GIF، JPG .
البته کاربران اینترنت اکسپلورر (InternetExplorer) ناچار هستند برنامه Adobe SVG Viewer  را نصب کنند تا بتوانند فایل های SVG را در مرورگر مشاهده کنند.

 بکار بردن مستقیم SVG در HTML5

HTML5 امکان بکاربردن فایل های SVG را به صورت مستقیم در دل کد های HTML فراهم می کند.که استفاده آن به سادگی زیر است:

<svg xmlns="http://www.w3.org/2000/svg">
...    
</svg>

 همچنین در مرورگر موزیلا فایر فاکس 3.7 (3.7 Firefox ) تنظیمات پیکربندی ("about:config") وجود دارد، که به کمک آن می توانید کدهای html5 را فعال کنید. برای این کار مراحل زیر را دنبال کنید:

1-    در نوار آدرس مرورگر خود about:config را تایپ کنید.

2-    در پیام هشدار که ظاهر می شود برر روی گزینه "I'll be careful, I promise!" کلیک کنید. (و البته به آن پایبند باشید.)

3-    در نوار فیلتر بالای صفحه html5.enable را تایپ کنید.

4-    ممکن است این گزینه غیرفعال باشد، بنابراین با کلیک بر روی مقدار فیلد value آن را برابر true قرار دهید.

حالا قابلیت تجزیه کننده HTML5 مرورگر شما فعال است و شما می توانید نمونه کدهای دستوری زیر را آزمایش کنید:

رسم دایره با استفاده از SVG در HTML5 :

در زیر مثالی از کد درون خطی SVG در HTML5 را مشاهده می کنید که در آن با استفاه از تگ <circle> یک دایره رسم شده است:

<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Circle</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
    <circle id="redcircle" cx="50" cy="50" r="50" fill="red" />
</svg>
</body>
</html>

 نتیجه کد بالا به این شکل است:

 HTML5-SVG

برای درک  کد SVG بالا، بهتر است خودتان امتحان کنید.
توجه داشته باشید که از فایرفاکس3.7 (Firefox) یا نسخه های بالاتراستفاه کنید، و از فعال بودن HTML5 در آن مطمئن شوید.  

 رسم مربع مستطیل با استفاده از SVG در HTML5 :

در زیر مثالی از کد درون خطی SVG در HTML5 را مشاهده می کنید که در آن با استفاه از تگ <rect> یک مستطیل رسم شده است:

<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Rectangle</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
    <rect id="redrect" width="300" height="100" fill="red" />
</svg>
</body>
</html>

 نتیجه کد بالا به این شکل است:

 HTML5-SVG

برای درک  کد SVG بالا، بهتر است خودتان امتحان کنید.
توجه داشته باشید که از فایرفاکس3.7 (Firefox) یا نسخه های بالاتراستفاه کنید، و از فعال بودن HTML5 در آن مطمئن شوید.  

رسم خط با استفاده از SVG در HTML5 :

در زیر مثالی از کد درون خطی SVG در HTML5 را مشاهده می کنید که در آن با استفاه از تگ <line> یک خط رسم شده است:

<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Line</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
    <line x1="0" y1="0" x2="200" y2="100"
          style="stroke:red;stroke-width:2"/>
</svg>
</body>
</html>

 شما می توانید با استفاده از صفت Style مجموعه ای از خاصیت ها از قبیل رنگ، ضخامت و... را اعمال کنید.

نتیجه کد بالا به این شکل است:

 HTML5-SVG

برای درک  کد SVG بالا، بهتر است خودتان امتحان کنید.
توجه داشته باشید که از فایرفاکس3.7 (Firefox) یا نسخه های بالاتراستفاه کنید، و از فعال بودن HTML5 در آن مطمئن شوید.  

رسم بیضی با استفاده از SVG در HTML5 :

در زیر مثالی از کد درون خطی SVG در HTML5 را مشاهده می کنید که در آن با استفاه از تگ <ellipse> یک بیضی رسم شده است:

<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Ellipse</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
    <ellipse cx="100" cy="50" rx="100" ry="50" fill="red" />
</svg>
</body>
</html>

نتیجه کد بالا به این شکل است:

 HTML5-SVG

برای درک  کد SVG بالا، بهتر است خودتان امتحان کنید.
توجه داشته باشید که از فایرفاکس3.7 (Firefox) یا نسخه های بالاتراستفاه کنید، و از فعال بودن HTML5 در آن مطمئن شوید.  

 رسم چند ضلعی با استفاده از SVG در HTML5 :

در زیر مثالی از کد درون خطی SVG در HTML5 را مشاهده می کنید که در آن با استفاه از تگ <polygon> یک چند گوشه (چندضلعی) رسم شده است:

<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Polygon</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
    <polygon  points="20,10 300,20, 170,50" fill="red" />
</svg>
</body>
</html>

نتیجه کد بالا به این شکل است:

 HTML5-SVG

برای درک  کد SVG بالا، بهتر است خودتان امتحان کنید.
توجه داشته باشید که از فایرفاکس3.7 (Firefox) یا نسخه های بالاتراستفاه کنید، و از فعال بودن HTML5 در آن مطمئن شوید.  

رسم چند خطی با استفاده از SVG در HTML5 :

در زیر مثالی از کد درون خطی SVG در HTML5 را مشاهده می کنید که در آن با استفاه از تگ <polyline> یک چند خطی رسم شده است:

<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Polyline</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
 <polyline points="0,0 0,20 20,20 20,40 40,40 40,60" fill="red" />
</svg>
</body>
</html>

 نتیجه کد بالا به این شکل است:

 HTML5-SVG

برای درک  کد SVG بالا، بهتر است خودتان امتحان کنید.
توجه داشته باشید که از فایرفاکس3.7 (Firefox) یا نسخه های بالاتراستفاه کنید، و از فعال بودن HTML5 در آن مطمئن شوید.  

رسم گرادیان با استفاده از SVG در HTML5 :

در زیر مثالی از کد درون خطی SVG در HTML5 را مشاهده می کنید که در آن با استفاه از تگ < ellipse> یک بیضی رسم شده و از تگ <radialGradient> برای ایجاد گرادیان (شیب رنگی) در بیضی استفاده شده است:

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

<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Gradient Ellipse</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
   <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-opacity:0"/>
      <stop offset="100%" style="stop-color:rgb(0,0,255);
      stop-opacity:1"/>
      </radialGradient>
   </defs>
   <ellipse cx="100" cy="50" rx="100" ry="50" 
      style="fill:url(#gradient)" />
</svg>
</body>
</html>

 نتیجه کد بالا به این شکل است:

 HTML5-SVG

در صورت استفاده از تگ <linearGradient> نتیجه به این شکل است :

 HTML5-SVG

برای درک  کد SVG بالا، بهتر است خودتان امتحان کنید.
توجه داشته باشید که از فایرفاکس3.7 (Firefox) یا نسخه های بالاتراستفاه کنید، و از فعال بودن HTML5 در آن مطمئن شوید.

 

با تشکر از همراهی شما، از سایر آموزش های ما در وب استیودنت دیدن فرمایید.

عضویت در وب استیودنت

در شبکه های اجتماعی همراه ما باشید

با ما در ارتباط باشید

سامانه پیامک: 50004657100

تلفن: 02122616859

دورنگار: 02189775650

ایمیل: info @ WebStudent.ir

تارنما: webstudent.ir

انجمن: forum.webstudent.ir

 

JoomShaper