SVG مخفف کلمات Scalable Vector Graphics میباشد که برای ایجاد گرافیک های برداری در صفحات وب بکار میرود . در این فرمت با زوم روی عکس ها کیفیت آنها پایین نمی آید . SVG یکی از توصیههای کنسرسیوم w3 میباشد زیرا با استفاده از این تکنولوژی جدید حجم عکس ها کاهش یافته و کیفیت انها در کلیه سایزها حفظ میشود .
اما مشکلی که وجود دارد , پشتیبانی نکردن مرورگرهای قدیمی تر از این پسوند می باشد . اما در این پست روشی جالب را آموزش خواهم داد که با استفاده از آن میتوانید این مشکل را حل نمایید .
و اما آموزش :
نحوه قرار دادن فایل SVG در وب سایت بسیار ساده و آسان است . کافیست آدرس فایل SVG خود را به جای photo.svg در کد پایین قرار دهید :
<img src="photo.svg" alt="توضیحات مربوط به عکس وارد شود" width="250" height="75">
اما نکته مهم اینجاست که کد بالا فقط در مرورگر های جدید کار می کند .
برای اینکه شما یک عکس با قابلیت نمایش در تمامی مرورگرها را داشته باشید :
ابتدا باید یک پسوند دیگر ( مثلا png یا jpg ) از همان SVG را داشته باشید و برای قرار دادن آن به روش زیر عمل کنید :
<img src="photo.svg" alt="توضیحات مربوط به عکس وارد شود" width="250" height="75" onerror="this.src='photo.png'">
توضیح : کد بالا در صورت عدم پشتیبانی مرورگر از SVG , فرمت PNG همان عکس را بر میگرداند .
نکته 1 : همان طور که مشخص می باشد شما باید بجز یک عکس با فرمت SVG , فرمت PNG یا JPG همان عکس را هم داشته باشید و به جای photo.png در کد بالا قرار دهید .
نکته 2 : حتما width و height عکس را وارد نمایید .