SVG در HTML

SVG در HTML

دسته بندی : آموزش HTML سطح مقاله : متوسط زمان مطالعه : 4 دقیقه آخرین بروز رسانی: 05 آذر 1399

SVG در HTML مخفف Scalable Vector Graphics است. برای توصیف گرافیک های دو بعدی ، مانند نمودارها و نمودارهای از نوع بردار ، استفاده می شود.

SVG دقیقا چیست؟

شاید بگویید SVG معادل HTML است ، اما برای گرافیک. این یک زبان نشانه گذاری است که توسعه دهندگان از آن برای توصیف گرافیک برداری دو بعدی استفاده می کنند. SVG مبتنی بر XML است و با سایر استانداردهای وب (مانند CSS و DOM) بسیار خوب کار می کند.

تصاویر در SVG با استفاده از هر ویرایشگر متنی که ترجیح می دهید به عنوان پرونده های متنی XML ایجاد و ذخیره می شوند. این امر امکان جستجو و نمایه سازی آنها را نیز فراهم می کند. با این حال ، شما باید به یاد داشته باشید که فایل ها را با پسوند .svg ذخیره کنید.

استفاده از SVG در HTML

تصاویر SVG مقیاس پذیر خوانده می شوند زیرا اندازه آنها می تواند بدون از دست دادن کیفیت تصویر کم یا زیاد شود. دلیل این امر این است که گرافیک برداری بیش از پیکسل از مسیر تشکیل شده است. به تصاویر ساخته شده از پیکسل (به عنوان مثال ، JPEG) گرافیک شطرنجی یا bitmap گفته می شود.

برای قرار دادن گرافیک برداری در وب سایت خود ، داده های تصویر را در تگ های <svg> قرار دهید. آن ها ظرفی را برای گرافیک SVG تعریف می کنند که سپس باید درون آن ها قرار گیرد:

<svg width="200" height="200">
  <rect width="200" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)">
</svg>

شکل های نقاشی در SVG

تگ <circle> یکی از تگ های HTML SVG است. این یک دایره را مشخص می کند که باید درون تگ SVG ترسیم شود:

<svg width="300" height="300">
  <circle cx="110" cy="110" r="35" stroke="yellow" stroke-width="6" fill="green">
</svg>

همانطور که در مثال مشاهده می کنید ، مکان و اندازه دایره با سه ویژگی تعریف شده است:

DescriptionAttribute
مختصات X برای مرکز دایرهcx
مختصات Y برای مرکز دایرهcy
شعاع دایرهr

تگ <rect> شکل مستطیل را در یک عنصر HTML SVG تعریف می کند:

<svg width="450" height="350">
  <rect width="450" height="350" style="fill: rgb(0, 255, 0); stroke-width: 20; stroke: rgb(120, 10, 0);">
</svg>

در مثال زیر ، یک مستطیل با گوشه های گرد ایجاد می کنیم:

<svg width="500" height="250">
  <rect x="40" y="30" rx="30" ry="30" width="200" height="200" style="fill: yellow; stroke: green; stroke-width: 15; opacity: 0.5;">
</svg>

ویژگی های rx و ry گرد بودن را تعریف می کنند: اگر هر دو را 180 مشخص کنید ، در نتیجه یک دایره کاملا گرد خواهید داشت.

برای ایجاد شکل پیچیده تر ، از عنصر <polygon> استفاده کنید. این شامل چندین خط مستقیم است که برای ایجاد یک شکل بسته به هم متصل می شوند:

<svg width="300" height="300">
  <polygon points="110,20 50,210 200,90 20,80 170,210" style="fill: green; stroke: yellow; stroke-width: 5; fill-rule: evenodd;">
</svg>

برای تعریف چند ضلعی ، با بیان چند عدد که مختصات X و Y آن را نشان می دهد ، نقاط را تعریف می کنیم. هر نقطه با یک خط مستقیم به نقطه بعدی متصل می شود. آخرین نقطه نیز برای بسته شدن شکل به نقطه اول متصل می شود.

در مثال ، اولین جفتی که مشاهده می کنیم 110،20 است. همانطور که محور X مثبت به سمت راست می رود و محور Y مثبت به سمت پایین می رود ، نقطه ما 110 پیکسل به راست و 20 پیکسل پایین است.

برای تعریف ابعاد یک عنصر SVG ، مشخصات عرض و ارتفاع را در تگ باز کنید:

<svg width="500">
  <rect width="200" height="100">
</svg>

تفاوت های اصلی SVG در مقابل canvas

اگر از قبل با عنصر<canvas> آشنا هستید ، ممکن است در مورد تفاوت این دو عنصر گیج شوید. هر دو برای گرافیک استفاده می شوند و هر دو برای استفاده به دانش پایه JavaScript احتیاج دارند.

بیایید SVG و بوم را با جزئیات مقایسه کنیم:

HTML5 CanvasHTML5 SVG
عنصر HTMLXML-based format
گرافیک رسترVector graphics
مقیاس پذیری ضعیفGreat scalability
از طریق JS اصلاح شده استModified via JS and CSS
از مسئولین رویداد پشتیبانی نمی کندSupports event handlers
به قطعنامه وابسته استResolution independent

نکات مهم SVG در HTML

  • مبتدیان معمولاً در انتخاب SVG در مقابل (PNG (Portable Network Graphics گیج می شوند ، زیرا هر دو از رنگ بالا ، شفافیت و فشرده سازی بدون اتلاف پشتیبانی می کنند. به خاطر داشته باشید اگر به مقیاس پذیری یا انیمیشن نیاز دارید ، SVG بهتر است.
  • اگر می خواهید یک شکل سفارشی ایجاد کنید اما آن را باز نگه دارید ، به جای <polygon> <polyline> را انتخاب کنید. به این ترتیب ، خط اول به خط آخر نخواهد پیوست.
  • همچنین می توانید تصاویر ایجاد شده در Adobe Illustrator را به صورت SVG ذخیره کنید – تمام کاری که شما باید انجام دهید این است که هنگام ذخیره آن پسوند .svg را مشخص کنید.

در دوره آموزش HTML بین المللی آکادمی دویکس به صورت رایگان ثبتنام کنید.

این مقاله چقدر براتون مفید بود؟

اولین امتیاز را ثبت کنید😊