مزایای استفاده از گرافیک بردار مقیاس پذیر
گرافیک برداری مقیاس پذیر، یا SVG، نقش مهمی در طراحی وب سایت امروز بازی می کند. اگر در حال حاضر از کار SVG خود در حال استفاده از SVG نیستید، در اینجا برخی از دلایل اینکه شما این کار را شروع می کنید، و همچنین فساد هایی است که می توانید برای مرورگرهای قدیمی که از این فایل ها پشتیبانی نمی کنند استفاده کنید.
وضوح
بزرگترین مزیت SVG استقلال استقلال است. از آنجا که فایل های SVG به جای تصاویر مبتنی بر پیکسل مبتنی بر گرافیک بردار هستند، می توانند بدون کاهش کیفیت تصویر تغییر اندازه داده شوند. این به خصوص هنگامی مفید است که شما در حال ایجاد وب سایت های پاسخگو هستید که نیاز به نگاه خوب دارند و به خوبی در طیف گسترده ای از اندازه صفحه نمایش و دستگاه ها کار می کنند .
فایل های SVG را می توان بزرگ یا پایین برای متناسب با تغییر اندازه و نیازهای طرح وب سایت پاسخگو خود را و شما لازم نیست که در مورد آن گرافیک با کیفیت به خطر بیافتد هر گام راه.
حجم فایل
یکی از چالش های استفاده از تصاویر شطرنجی (JPG، PNG، GIF) در وب سایت های پاسخگو ، اندازه فایل این تصاویر است. از آنجا که تصاویر شطرنجی روش هایی را که آن بردار ها انجام می دهند را اندازه گیری نمی کنند، شما نیاز به ارائه تصاویر مبتنی بر پیکسل خود را در بزرگترین اندازه که در آن نمایش داده خواهد شد. این به این دلیل است که شما همیشه می توانید یک تصویر را کوچکتر و کیفیت آن را حفظ کنید، اما برای ایجاد تصاویر بزرگتر این درست نیست. نتیجه نهایی این است که شما اغلب تصاویری بسیار بزرگتر از آنچه روی صفحه شخصی نشان داده می شود، بدان معنی است که آنها مجبور به دانلود یک فایل بسیار بزرگ می شوند.
SVG این چالش را مطرح می کند. از آنجا که گرافیک برداری بر پایه مقیاس پذیری است، شما می توانید اندازه فایل های بسیار کوچک را بدون در نظر گرفتن اینکه چه اندازه این تصاویر ممکن است نمایش داده شود داشته باشند. این در نهایت تاثیر مثبتی بر عملکرد کلی سایت و سرعت دانلود خواهد داشت.
یک ظاهر طراحی شده CSS
کد SVG همچنین می تواند به طور مستقیم به HTML یک صفحه اضافه شود. این به عنوان "SVG درون خطی" شناخته می شود. یکی از مزایای استفاده از SVG درون خطی این است که از آنجا که گرافیک در واقع توسط مرورگر بر اساس کد شما کشیده شده است، نیازی به ایجاد یک درخواست HTTP برای برداشتن یک فایل تصویر وجود ندارد. مزیت دیگر این است که SVG درون خطی می تواند با CSS طراحی شود.
نیاز به تغییر رنگ آیکون SVG؟ به جای نیاز به باز کردن آن تصویر در نوعی نرم افزار ویرایش و صادرات و بارگذاری مجدد فایل، می توانید فایل SVG را با چند خط CSS تغییر دهید.
شما همچنین می توانید از دیگر سبک های CSS در گرافیک SVG استفاده کنید تا آنها را در حالت های شناور یا برای نیازهای طراحی خاص تغییر دهید. شما حتی می توانید این گرافیک را تحریک و تقویت کنید تا جابجایی و تعامل با یک صفحه را اضافه کنید.
تصاوير متحرك
از آنجا که فایل های SVG درون خطی می تواند با CSS طراحی شده باشد، می توانید از انیمیشن CSS روی آنها استفاده کنید. CSS تبدیل و انتقال دو راه آسان برای اضافه کردن برخی از زندگی به فایل های SVG است. شما می توانید تجربیات غنی فلش مانند یک صفحه را بیابید بدون آنکه به ناامیدی هایی که امروزه با استفاده از فلش در وب سایت ها می آید، به دست آورید.
استفاده از SVG
همانطور که قدرتمند به عنوان SVG است، این گرافیک نمی تواند هر فرمت تصویر دیگر که در وب سایت شما استفاده می کنید جایگزین شود. عکس هایی که نیاز به عمق رنگ عمیق دارند هنوز باید یک فایل JPG یا شاید یک فایل PNG باشند، اما تصاویر ساده مانند آیکون ها کاملا مناسب برای اجرای SVG می باشند.
SVG همچنین می تواند برای تصاویر پیچیده تر، مانند آرم ها یا نمودارها و نمودارهای شرکت مناسب باشد. تمام گرافیک ها از مقیاس پذیری برخوردار خواهند بود، قادر به طراحی CSS و سایر مزایای ذکر شده در این مقاله خواهند بود.
پشتیبانی از مرورگرهای قدیمیتر
پشتیبانی فعلی از SVG در مرورگرهای وب مدرن بسیار خوب است. تنها مرورگرهایی که واقعا از این گرافیک پشتیبانی نمی کنند، نسخه های قدیمی تر اینترنت اکسپلورر (نسخه 8 و پایین تر) و چند نسخه قدیمی از Android است. در مجموع، درصد بسیار کمی از جمعیت مرورگر هنوز از این مرورگرها استفاده می کند و این تعداد همچنان به کاهش می انجامد. این به این معنی است که SVG امروزه در وب سایتها بسیار امن است.
اگر می خواهید یک جایگزین برای SVG ایجاد کنید، می توانید از یک ابزار مانند Grumpicon از گروه رشته استفاده کنید. این منبع فایل های تصویر SVG شما را ایجاد می کند و برای مرورگرهای قدیمی تر PNG را ایجاد می کند.
ویرایش شده توسط Jeremy Girard در 17/27/17