عدم نمایش SVG در گوگل کروم

سلام،

خب اولین مطلبم رو در ویرگول با یک موردی که هم خودم بهش برخورد کردم هم خیلی از دوستام که خب خیلی ساده قابل رفع هست شروع می کنم.

در طراحی رابط کاربری که در نرم افزارهای مختلف از جمله فتوشاپ Photoshop انجام میشه، موارد زیادی از جمله عکس و آیکن و ... به کار میره.

طراح وب (یک عدد تبدیل کننده psd به html,css) را گویند. :))

وقتی این بنده خدا می خواد تبدیل به کد کنه طرح رو یکسری آیکن ها و تصاویر رو باید تبدیل به فرمت svg برای بارگزاری سریعتر و با کیفیت تر کنه.

برای حل این موضوع فقط کافیه یک تغییر کوچک در کد خروجی از Photoshop بدیم و تمام ...

توجه : این که می تونه از فونت آیکون و خیلی موارد دیگه استفاده کنه خب بحثی در اون نیست !

وقتی از فتوشاپ خروجی svg می گیریم با روش رایت کلیک روی یک لایه و انتخاب گزینه copy svg ، کدهای تصویر ما در حافظه موقت کپی می شه، حالا باید اون رو در قالب یک فایل با پسوند .svg قرار بدیم.

بعد از اینکه این کار رو کردیم به شکل یک تصویر معمولی از اون توی پروژه استفاده می کنیم، در کمال تعجب می بینیم که مرورگری مثل Mozilla Firefox اون رو نمایش میده ولی Google Chrome متاسفانه اون رو نمایش نمیده.

برای حل این موضوع فقط کافیه یک تغییر کوچک در کد خروجی از Photoshop بدیم و تمام ...

نمونه کد خروجی از فتوشاپ :

<svg xmlns=&quothttp://www.w3.org/2000/svg&quot xmlns:xlink=&quothttp://www.w3.org/1999/xlink&quot width=&quot31px&quot height=&quot17px&quot><image opacity=&quot0.6&quot x=&quot0px&quot y=&quot0px&quot width=&quot31px&quot height=&quot17px&quot xlink:href=&quotiVBORw0KGgoAAAANSUhEUgAAAB8AAAARCAQAAACPrb/CAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfkAQ4BKwt83uNhAAAA1UlEQVQ4y53RsUrDUBiG4SdyQGtxrURvQUdJ1MVR70CHKogFvSBpM3gRgpN4FergVNwaXBqcRJA4RGjcevL92wfvef+fo7b0bNUX9fb/bsXy2XdgJG1XMfiTF6kbm4sqqSN46y7tmpkou+CsGdnx4bZ5IGZ5+HLn1cC1QRd7kyt7ShOzpM6sRsLf+k5sKBVJXXTR/+UtuNcTd8GP4FDf3EO3288c+TQ2DdFoMJSbm3gnFg/OZaoGjv33YChTGTdwnL3nVN6G4+zHcpViAcfZn6UeTdvVL9xnUkTW5YFYAAAAAElFTkSuQmCC&quot /></svg>

در کد بالا دقت کنید !

xlink:href=&quotdata:img/png;

این قسمت کد باعث میشه که گوگل کروم عزیز قابلیت شناسایی و نمایش تصاویر svg که تولید کردیم رو نداشته باشه. حالا اگر کلمه img رو به image تغییر بدیم می بینیم که گوگل کروم هم به خوبی فایل رو شناسایی می کنه و نمایش میده .

کد باید به شکل زیر تغییر کنه :

xlink:href=&quotdata:image/png;

تامام !

راه های زیادی برای این مورد وجود داره، خروجی از illustrator و موارد مختلف دیگه که در برنامه نویسی میشه رعایت کرد.

اما بنظرم برای شروع و سریعتر پیشرفتن در کار راهکار بدی نباشه ...

شما نظرتون چیه ؟!

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