تصویر PNG با حجم ۶.۳ کیلوبایت
تصویر SVG با حجم ۱.۷ کیلوبایت
.logo {
background: url(images/svgicon.svg) center;
background-size: 128px 128px;
}
نکته: در صورتی که SVG را به شکل background-image در CSS استفاده کردید
حتما باید از background-size هم استفاده کنید.
واقعا بعید به نظر میرسد کسی از این شیوه استفاده کند ولی به هر حال
¯/_(ツ)_\¯
تگ embed استاندارد و پذیرفته W3C نیست. پس ترجیحا از این متد استفاده نکنید ;)
کدومش روش بهتریه؟
قابلیت ها | object | inline | img | background-image |
---|---|---|---|---|
دسترسی از طریق CSS | دارد | دارد | به شکل خاص | به شکل خاص |
دسترسی از طریق JS | دارد | دارد | ندارد | ندارد |
استفاده از SVG Animation | دارد | دارد | دارد | دارد |
Interactive Animation | دارد | دارد | ندارد | ندارد |
منظور از «به شکل خاص» حالتی است که دستورات CSS داخل خود فایل SVG قرار گرفته باشند.
در اینجا انیمیشن ما داخل خود فایل SVG قرار گرفته است
تغییر رنگ آیکون های SVG که به شکل img در صفحه استفاده شده باشند با استفاده از ترفندهایی امکانپذیر است. برای اطلاعات بیشتر میتوانید این ویدیو را ببینید:
https://www.youtube.com/embed/M2IDKozS9lI
استفاده از SMIL (بخوانید اسمایل) پیشنهاد نمیشود
SMIL is Deadنامگذاری لایه ها توسط طراح، کار را برای شما آسان تر میکند :)
استفاده از فرمت vector لزوما تضمین نمیکند که تصاویر شما شارپ باشد
با استفاده از این ابزار به راحتی میتوانید فایل SVG خود را تمیز کنید. اگر میخواهید از ابزار آفلاین استفاده کنید میتوانید از این پلاگین استفاده کنید:
https://github.com/svg/svgo
https://css-tricks.com/svg-properties-and-css/
https://www.w3.org/TR/SVG11/styling.html
با من در تماس باشید :)