چگونه از SVG در سایت خود استفاده کنیم – اسکریپت دات کام https://www.xn--mgbguh09aqiwi.com اسکریپت دات کام Sat, 22 Jul 2017 13:57:05 +0000 fa-IR hourly 1 https://wordpress.org/?v=5.6.14 ترفند قرار دادن تصاویر SVG در وب سایت ( پشتیبانی همه مرورگرها ) https://www.xn--mgbguh09aqiwi.com/%d8%aa%d8%b1%d9%81%d9%86%d8%af-%d9%82%d8%b1%d8%a7%d8%b1-%d8%af%d8%a7%d8%af%d9%86-%d8%aa%d8%b5%d8%a7%d9%88%db%8c%d8%b1-svg-%d8%af%d8%b1-%d9%88%d8%a8-%d8%b3%d8%a7%db%8c%d8%aa.html https://www.xn--mgbguh09aqiwi.com/%d8%aa%d8%b1%d9%81%d9%86%d8%af-%d9%82%d8%b1%d8%a7%d8%b1-%d8%af%d8%a7%d8%af%d9%86-%d8%aa%d8%b5%d8%a7%d9%88%db%8c%d8%b1-svg-%d8%af%d8%b1-%d9%88%d8%a8-%d8%b3%d8%a7%db%8c%d8%aa.html#respond Sat, 22 Jul 2017 13:55:04 +0000 http://www.xn--mgbguh09aqiwi.com/?p=29572 SVG مخفف کلمات Scalable Vector Graphics میباشد که برای ایجاد گرافیک های برداری در صفحات وب بکار میرود . در این فرمت با زوم روی عکس ها کیفیت آنها پایین نمی آید . SVG یکی از توصیه‌های کنسرسیوم w3 میباشد زیرا با استفاده از این تکنولوژی جدید حجم عکس ها کاهش یافته و کیفیت انها در کلیه سایزها حفظ میشود .

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

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

و اما آموزش : 

نحوه قرار دادن فایل 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 عکس را وارد نمایید .

پخش اختصاصی

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

]]>
https://www.xn--mgbguh09aqiwi.com/%d8%aa%d8%b1%d9%81%d9%86%d8%af-%d9%82%d8%b1%d8%a7%d8%b1-%d8%af%d8%a7%d8%af%d9%86-%d8%aa%d8%b5%d8%a7%d9%88%db%8c%d8%b1-svg-%d8%af%d8%b1-%d9%88%d8%a8-%d8%b3%d8%a7%db%8c%d8%aa.html/feed 0