آموزش HTML : گنجاندن گرافیکهای برداری در HTML
گرافیکهای برداری در بسیاری از شرایط بسیار مفید هستند - اندازه فایلهای آنها کوچک است و قابلیت مقیاسپذیری بالایی دارند، بنابراین هنگام بزرگنمایی یا بزرگنمایی، پیکسلی نمیشوند. در این مقاله به شما نشان خواهیم داد که چگونه یکی از آنها را در صفحه وب خود قرار دهید.
در وب، با دو نوع تصویر کار خواهید کرد - تصاویر رستری (raster images) و تصاویر برداری (vector images):
- تصاویر رستری با استفاده از شبکهای از پیکسلها تعریف میشوند - یک فایل تصویر رستری حاوی اطلاعاتی است که دقیقاً نشان میدهد هر پیکسل کجا قرار میگیرد و دقیقاً چه رنگی باید داشته باشد. فرمتهای رستری محبوب وب شامل Bitmap (.bmp)، PNG (.png)، JPEG (.jpg) و GIF (.gif) هستند.
- تصاویر برداری با استفاده از الگوریتمها تعریف میشوند - یک فایل تصویر برداری شامل تعاریف شکل و مسیر است که کامپیوتر میتواند از آنها برای تشخیص اینکه تصویر هنگام رندر شدن روی صفحه نمایش چگونه باید باشد، استفاده کند. فرمت SVG به ما امکان میدهد گرافیکهای برداری قدرتمندی برای استفاده در وب ایجاد کنیم.
برای اینکه ایدهای از تفاوت بین این دو به شما بدهیم، بیایید به یک مثال نگاه کنیم. میتوانید این مثال را به صورت زنده در مخزن GitHub ما با عنوان vector-versus-raster.html پیدا کنید - این مثال دو تصویر به ظاهر یکسان را در کنار هم نشان میدهد، از یک ستاره قرمز با سایه سیاه. تفاوت این است که تصویر سمت چپ PNG و تصویر سمت راست SVG است.
این تفاوت زمانی آشکار میشود که صفحه را بزرگنمایی میکنید - تصویر PNG با بزرگنمایی پیکسلی میشود زیرا حاوی اطلاعاتی در مورد محل قرارگیری هر پیکسل (و رنگ آن) است. وقتی بزرگنمایی میشود، اندازه هر پیکسل افزایش مییابد تا چندین پیکسل را روی صفحه پر کند، بنابراین تصویر شروع به بلوکی شدن میکند. با این حال، تصویر برداری همچنان زیبا و واضح به نظر میرسد، زیرا صرف نظر از اندازه آن، الگوریتمها برای تشخیص اشکال در تصویر استفاده میشوند و مقادیر با بزرگتر شدن تصویر، مقیاسبندی میشوند.
علاوه بر این، فایلهای تصویر برداری بسیار سبکتر از معادلهای رستری خود هستند، زیرا آنها فقط به تعداد انگشتشماری الگوریتم نیاز دارند، نه اطلاعات مربوط به هر پیکسل در تصویر به صورت جداگانه.
SVG یک زبان مبتنی بر XML برای توصیف تصاویر برداری است. این زبان اساساً مانند HTML یک نشانهگذاری است، با این تفاوت که عناصر مختلف زیادی برای تعریف شکلهایی که میخواهید در تصویر شما ظاهر شوند و جلوههایی که میخواهید روی آن شکلها اعمال کنید، دارید. SVG برای نشانهگذاری گرافیک است، نه محتوا. SVG عناصری را برای ایجاد اشکال اولیه، مانند و ، و همچنین عناصری را برای ایجاد اشکال پیچیدهتر، مانند و ، تعریف میکند. ویژگیهای پیشرفتهتر SVG شامل (تبدیل رنگها با استفاده از ماتریس تبدیل)، (متحرکسازی بخشهایی از گرافیک برداری شما) و (اعمال ماسک روی بالای تصویر شما) است.
به عنوان یک مثال ساده، کد زیر یک دایره و یک مستطیل ایجاد میکند:
از مثال بالا، ممکن است این تصور را داشته باشید که کدنویسی دستی SVG آسان است. بله، میتوانید SVG ساده را در یک ویرایشگر متن به صورت دستی کدنویسی کنید، اما برای یک تصویر پیچیده، این کار به سرعت بسیار دشوار میشود. برای ایجاد تصاویر SVG، اکثر افراد از یک ویرایشگر گرافیک برداری مانند Inkscape یا Illustrator استفاده میکنند. این بستهها به شما امکان میدهند با استفاده از ابزارهای گرافیکی مختلف، تصاویر متنوعی ایجاد کنید و تقریبهایی از عکسها ایجاد کنید (به عنوان مثال، ویژگی Trace Bitmap در Inkscape).
SVG علاوه بر مواردی که تاکنون توضیح داده شده است، مزایای دیگری نیز دارد:- متن در تصاویر برداری همچنان قابل دسترسی است (که به سئوی شما نیز کمک میکند).
- SVG ها به خوبی برای استایلدهی/اسکریپتنویسی مناسب هستند، زیرا هر جزء تصویر عنصری است که میتواند از طریق CSS استایلدهی شود یا از طریق جاوا اسکریپت اسکریپتنویسی شود.
پس چرا کسی باید بخواهد از گرافیکهای رستری به جای SVG استفاده کند؟ خب، SVG معایبی هم دارد:
- SVG میتواند خیلی سریع پیچیده شود، به این معنی که اندازه فایلها میتواند افزایش یابد؛ SVGهای پیچیده همچنین میتوانند زمان پردازش قابل توجهی را در مرورگر بگیرند.
- بسته به نوع تصویری که میخواهید ایجاد کنید، ایجاد SVG میتواند دشوارتر از تصاویر رستری باشد.گرافیکهای SVG که از ویرایشگرهایی مانند Inkscape استخراج میشوند، فضای زیادی برای بهینهسازی اندازه دارند. قبل از انتشار آنها در وب، احتمالاً میخواهید آنها را از طریق یک بهینهساز SVG مانند SVGO اجرا کنید.
اضافه کردن SVG به صفحات شما
در این بخش، روشهای مختلفی را که میتوانید گرافیکهای برداری SVG را به صفحات وب خود اضافه کنید، بررسی خواهیم کرد.
برای جاسازی یک SVG از طریق یک عنصر ، همانطور که انتظار دارید، فقط باید آن را در ویژگی src ارجاع دهید. به یک ویژگی height یا width (یا هر دو اگر SVG شما نسبت ابعاد ذاتی ندارد) نیاز خواهید داشت. اگر قبلاً این کار را نکردهاید، لطفاً تصاویر HTML را مطالعه کنید.
مزایا:
- نحوه نمایش سریع و آشنای تصویر با معادل متنی داخلی موجود در ویژگی alt.
- شما میتوانید با قرار دادن
درون یک عنصر ، تصویر را به راحتی به یک هایپرلینک تبدیل کنید.
- فایل SVG میتواند توسط مرورگر ذخیره شود و در نتیجه زمان بارگذاری سریعتری را برای هر صفحهای که در آینده از تصویر بارگذاری شده استفاده میکند، به همراه داشته باشد.
معایب
- شما نمیتوانید تصویر را با جاوا اسکریپت دستکاری کنید.
- اگر میخواهید محتوای SVG را با CSS کنترل کنید، باید سبکهای CSS درونخطی را در کد SVG خود وارد کنید. (شیوهنامههای خارجی که از فایل SVG فراخوانی میشوند، هیچ تاثیری ندارند.)
- شما نمیتوانید تصویر را با شبهکلاسهای CSS (مانند :focus) تغییر سبک دهید.
عیبیابی و پشتیبانی از مرورگرهای مختلف
برای مرورگرهایی که از SVG پشتیبانی نمیکنند (IE 8 و پایینتر، Android 2.3 و پایینتر)، میتوانید از ویژگی src خود به یک PNG یا JPG ارجاع دهید و از ویژگی srcset (که فقط مرورگرهای جدید آن را میشناسند) برای ارجاع به SVG استفاده کنید. در این صورت، فقط مرورگرهای پشتیبانیکننده SVG را بارگذاری میکنند - مرورگرهای قدیمیتر به جای آن PNG را بارگذاری میکنند:
شما همچنین میتوانید از SVGها به عنوان تصاویر پسزمینه CSS استفاده کنید، همانطور که در زیر نشان داده شده است. در کد زیر، مرورگرهای قدیمیتر به PNG که میفهمند پایبند میمانند، در حالی که مرورگرهای جدیدتر SVG را بارگذاری میکنند:
مانند روش که در بالا توضیح داده شد، درج SVG با استفاده از تصاویر پسزمینه CSS به این معنی است که SVG را نمیتوان با جاوا اسکریپت دستکاری کرد و همچنین مشمول همان محدودیتهای CSS است.
اگر SVG های شما اصلاً نمایش داده نمیشوند، ممکن است به این دلیل باشد که سرور شما به درستی تنظیم نشده است.
چگونه کد SVG را در HTML خود قرار دهیم
همچنین میتوانید فایل SVG را در یک ویرایشگر متن باز کنید، کد SVG را کپی کنید و آن را در سند HTML خود جایگذاری کنید - این کار گاهی اوقات قرار دادن SVG در خط داخلی یا inline کردن SVG نامیده میشود. مطمئن شوید که قطعه کد SVG شما با برچسب شروع شروع میشود و با برچسب پایان به پایان میرسد. در اینجا یک مثال بسیار ساده از آنچه میتوانید در سند خود جایگذاری کنید، آورده شده است:
مزایا
- قرار دادن SVG به صورت درونخطی، درخواست HTTP را ذخیره میکند و بنابراین میتواند زمان بارگذاری شما را کمی کاهش دهد.
- شما میتوانید کلاسها و شناسهها را به عناصر SVG اختصاص دهید و آنها را با CSS، چه در SVG و چه در هر جایی که قوانین سبک CSS را برای سند HTML خود قرار میدهید، استایل دهید. در واقع، میتوانید از هر ویژگی ارائه SVG به عنوان یک ویژگی CSS استفاده کنید.
- درونخطی کردن SVG تنها رویکردی است که به شما امکان میدهد از تعاملات CSS (مانند :focus) و انیمیشنهای CSS روی تصویر SVG خود (حتی در صفحه سبک معمولی خود) استفاده کنید.
- شما میتوانید با قرار دادن SVG در یک عنصر ، آن را به یک هایپرلینک تبدیل کنید.
معایب
- این روش فقط در صورتی مناسب است که فقط در یک مکان از SVG استفاده میکنید. تکرار باعث میشود که نگهداری منابع فشرده شود.
- کد SVG اضافی، اندازه فایل HTML شما را افزایش میدهد.
- مرورگر نمیتواند SVG درونخطی را مانند تصاویر معمولی ذخیره کند، بنابراین صفحاتی که شامل تصویر هستند، پس از بارگذاری اولین صفحه حاوی تصویر، سریعتر بارگیری نمیشوند. شما میتوانید یک تصویر جایگزین را در عنصر قرار دهید، اما مرورگرهایی که از SVG پشتیبانی میکنند، همچنان تصاویر جایگزین را دانلود میکنند. شما باید بسنجید که آیا این سربار اضافی واقعاً ارزشش را دارد، فقط برای پشتیبانی از مرورگرهای قدیمی.
نحوه جاسازی SVG با iframe
شما میتوانید تصاویر SVG را درست مانند صفحات وب در مرورگر خود باز کنید. بنابراین جاسازی یک سند SVG با یک انجام میشود.
این قطعاً بهترین روش برای انتخاب نیست:
معایب
- عناصر میتوانند شامل محتوای جایگزین بین تگهای باز و بسته خود باشند، اما این فقط در مرورگرهایی نمایش داده میشود که از ها پشتیبانی نمیکنند، نه زمانی که تصویر بارگیری نمیشود.
- علاوه بر این، مگر اینکه SVG و صفحه وب فعلی شما منشأ یکسانی داشته باشند، نمیتوانید از جاوا اسکریپت در صفحه وب اصلی خود برای دستکاری SVG استفاده کنید.
