ترفند قرار دادن تصاویر SVG در وب سایت ( پشتیبانی همه مرورگرها )

SVG مخفف کلمات Scalable Vector Graphics میباشد که برای ایجاد گرافیک های برداری در صفحات وب بکار میرود . در این فرمت با زوم روی عکس ها کیفیت آنها پایین نمی آید . SVG یکی از توصیه‌های کنسرسیوم w3 میباشد زیرا با استفاده از این تکنولوژی جدید حجم عکس ها کاهش یافته و کیفیت انها در کلیه سایزها حفظ میشود .

اما مشکلی که وجود دارد , پشتیبانی نکردن مرورگرهای قدیمی تر از این پسوند می باشد . اما در این پست از وب سایت اسکریپت دات کام , روشی جالب را آموزش خواهم داد که با استفاده از آن میتوانید این مشکل را حل نمایید .

و اما آموزش : 

نحوه قرار دادن فایل SVG در وب سایت بسیار ساده و آسان است . کافیست آدرس فایل SVG خود را به جای vms.svg در کد پایین قرار دهید :

<img src="vms.svg" alt="توضیحات مربوط به عکس وارد شود" width="250" height="75">

اما نکته مهم اینجاست که کد بالا فقط در مرورگر های جدید کار می کند .

برای اینکه شما یک عکس با قابلیت نمایش در تمامی مرورگرها را داشته باشید :

ابتدا باید یک پسوند دیگر ( مثلا png یا jpg ) از همان SVG را داشته باشید و برای قرار دادن آن به روش زیر عمل کنید :

<img src="vms.svg" alt="توضیحات مربوط به عکس وارد شود" width="250" height="75" onerror="this.src='vms.png'">

توضیح : کد بالا در صورت عدم پشتیبانی مرورگر از SVG , فرمت PNG همان عکس را بر میگرداند .

نکته 1 : همان طور که مشخص می باشد شما باید بجز یک عکس با فرمت SVG , فرمت PNG یا JPG همان عکس را هم داشته باشید و به جای vms.png در کد بالا قرار دهید .

نکته 2 : حتما width و height عکس را وارد نمایید .

پخش اختصاصی

گرداوری و آموزش : وحید مجیدی