ترفند درج تصاویر SVG در وب سایت

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

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

و اما آموزش :

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

<img src="vms.svg" alt="title" width="250" height="75">

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

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

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

<img src="vms.svg" alt="title" width="250" height="75" onerror="this.src='vms.png'">

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

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

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

مطالب مرتبط

تفاوت UI و UX در طراحی سایت چیست؟

تفاوت UI و UX در طراحی سایت چیست؟

  UI و UX یکی از مهم ترین اصطلاحاتی است که در روند شکل گیری سایت نقش مهم و ویژه ای را ایفا می کند. در کنار رعایت اصول کدنویسی باید به این بخش توجه بسیاری کرد، در واقع زمانی که یک سایت طراحی می شود و مطالبی در آن بارگذاری می شود، کاربر با […]

رپورتاژ آگهی چیست؟

رپورتاژ آگهی چیست؟

شاید تاکنون عنوان رپورتاژ آگهی را شنیده باشید و برایتان سؤال شده باشد که رپورتاژ آگهی چیست و منظور از رپورتاژ آگهی، محتوای ویدئویی است یا محتوای متنی و یا محتوای صوتی؟ اکثر شرکت ها سعی دارند با به کار گرفتن مطالب و موضوعاتی در زمینه روابط عمومی و همکاری از طریق فضای مجازی، سایت […]

Doorway Page چیست؟

Doorway Page چیست؟

در ابتدا قصد داریم قبل از اینکه راجع به مفهوم Doorway Page صحبت کنیم به طور جداگانه لغات آن را بررسی کنیم. بدون شک میدانید که کلمه Door در زبان فارسی به معنای درب، دروازه و ورودی می‌باشد و کلمه Way نیز به معنای مسیر و راه است. بنابراین طبق توضیحات داده شده به طور […]

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

محصولات ویژه