سلام به همه دوستان راکت، در این دوره آموزشی کوتاه قصد داریم تا شما را با SVG آشنا سازیم. این دوره از ۶ قسمت تشکیل می‌شود که در هر قسمت سعی شده تا بخشی از SVG را به شما آشنا سازیم.
هشت دلیل برای استفاده از SVG
SVG یا Scalable Vector Graphics در حال حاضر توسط تمام مرورگرها چه در سطح موبایل و یا در بخش دسکتاپ به خوبی پشتیبانی می‌شود. در اینجا قصد داریم به شما بگوییم که آن‌ها چه هستند و چگونه آن ها را در طراحی وب استفاده و طراحی کنیم.
ابتدا بیایید با هشت دلیل استفاده از SVG آشنا شویم:
۱. بردارها تیز و دقیق هستند
SVG از یک سیستم نقشه‌برداری مختصاتی برای طراحی نقطه‌ها و ارتباط دادن آن‌ها به هم -ایجاد خط و دیگر اشکال- استفاده می‌کند. گرافیک‌های برداری توسط ریاضی کشیده می‌شوند، به این معنا که آن‌ها تیز و دقیق طراحی شده اند. درست برعکس حالت پیکسلی که در قالب تصاویر مشاهده می‌کنیم. این ویژگی SVG باعث می‌شود که استفاده از آن برای لوگو‌ها، آیکون‌ها و تصویر‌سازی‌ها بسیار مناسب باشد.
SVG ویژگی‌های مختلف دیگری را نیز ارائه می‌کند، فیلترها، الگوها، گرادینت‌ها و موارد مختلف دیگر. همچنین SVGها قابلیت انیمیشنی بودن دارند. SVG به شدت انعطاف پذیر است و در حال حاضر تقریبا توسط تمام مرورگرها پشتیبانی می‌شود.
۲. دارا بودن یک DOM سفارشی
SVG در داخل مرورگر دارای یک DOM منحصر به فرد است. SVG برای مرورگر به صورت یک سند متفاوت ارائه می‌شود. به همین دلیل داخل DOM عادی موقعیت متناسب با خود را دارد. این موضوع برای خاصیت viewBox نیز بسیار مورد مهمی است. داشتن یک DOM سفارشی این کمک را می‌کند که بشود از طریق CSS و جاوااسکریپت بهتر با المان‌های SVG تعامل برقرار کنیم.
۳. قابل دسترس است
SVG تگ‌هایی به خصوص برای قابلیت دسترسی‌پذیری را ارائه می‌دهد. مهمترین آن‌ها تگ <title> است. این تگ همراه با تگ <desc> حالتی را فراهم می‌کنند که افراد نابینا بتوانند از محتویات SVG آشنایی پیدا کنند. این کار از طریق Screen Readerها انجام می‌شود.
محتویات این تگ‌ها در مرورگر نمایش داده نمی‌شوند، اما APIهای دسترسی‌پذیری مرورگر آن‌ها را به دقت مشاهده می‌کند. همچنین میتوانید از خاصیت‌های ARIA در جایی که مناسب کار است استفاده کنید، برای مثال در حالتی که شما مشغول مخفی کردن یک المان SVG هستید، می‌تواند بسیار کاربردی باشد.
۴. رزولوشن مستقل و واکنشگرا
براساس ویژگی‌هایی که SVG دارد، تصاویر ساخته شده با استفاده از این حالت، رزولوشن مستقلی دارند. تصاویر ساخته شده با استفاده از این حالت نمای دقیق و شفافی را در هر صفحه نمایشی ارائه می‌کنند.
با استفاده کردن از SVG دیگر نیازی به ایجاد تصاویر «@2x.png» نیست. همچنین می‌شود از المان‌های ساخته شده درست مانند المان‌های دیگر که در طراحی واکنشگرا استفاده می‌شود رفتار کرد.
۵. قابلیت متحرک بودن
المنت‌های داخل SVG می‌توانند متحرک باشند، با این کار می‌شود تجربه‌ای تعاملی را برای کاربران ایجاد کرد، همچنین می‌شود از آن‌ها برای ایجاد یک ریزتعامل بسیار زیبا در تصاویر و آیکون‌ها استفاده نمود.
انیمیشن‌ها در محیط وب می‌توانند توسط CSS، ای‌پی‌آی‌های دنیای Web Animation و یا تگ <animate> مربوط به SVG درست شود. انیمیشن‌های SVG در حال حاضر در نقطه بسیار خوب و مناسبی قرار دارد.
۶. قابلیت استایل پذیری
با استفاده از نام کلاس‌ها و آی‌دی‌ها میتوانید المان‌های داخل SVG را استایل‌دهی کنید. البته برخی از حالات استایل‌دهی نیز فرق می‌کنند. برای مثال در CSS عادی از color استفاده می‌شود اما در اینجا باید از fill استفاده کنید. البته در مرورگرهای اینترنت اکسپلورر یک مشکل با این قضیه وجود دارد و آن این است که اگر از SVG به صورت تصویر استفاده شود و بخواهید المان‌های داخل آن را استایل‌دهی کنید، نمی‌توانید این کار را به صورت مستقیم انجام دهید. بلکه باید از svg4everybody استفاده نمایید.
۷. تعاملی است
با استفاده از جاوااسکریپت ما می‌توانیم با المان‌های داخل SVG تعامل برقرار کنیم، البته این موضوع نیز به دلیل وجود DOM منحصر به فرد است. این موضوع به ما اجازه می‌دهد که درست مانند حالتی که از HTML و CSS در پروسه تعامل‌پذیری استفاده می‌کردیم، از SVG نیز بهره بگیریم.
همچنین می‌توانیم از طریق جاوااسکریپت انیمیشن‌های پیچیده و ساده‌ای را طراحی و پیاده‌سازی کنیم. در کنار تمام این موارد کتابخانه‌های جاوااسکریپتی نیز ارائه شده اند که سرعت کار با SVG را بسیار سریع‌تر می‌کنند.
۸. اندازه فایل‌ها می‌تواند کوچک باشد
براساس ساختار SVG (تصویری که از یکسری مختصات تشکیل می‌شود) وقتی اندازه فایل‌ها را در مقایسه با دیگر نوع‌های تصویری مقایسه می‌کنیم، اندازه بسیار کمتری را دارد.
راه‌های بسیار مختلفی برای بهینه‌سازی تصاویر ساخته شده در SVG موجود است، SVGOMG یکی از موارد خوب و مناسب این حوضه است که با داشتن رابط گرافیکی به کارتان سرعت می‌بخشد.
از آن‌جایی که SVG می‌تواند واکنشگرا، همراه با قابلیت انیمیشن‌سازی باشد پس دیگر دلیلی ندارد که از آن استفاده نکنید.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید