CSS 图像和 SVG 之间的差异
Differences between CSS images and SVGs
我想知道您网站上的 CSS 图片和 SVG 是否有任何区别。
CSS 图片是指在 HTML 中使用 div 创建并在 CSS 中设置样式的图片（例如：https://codepen.io/andrewrock/pen/jOEZxrY）。
是的，CSS 图片更耗时，但除此之外它们都是可动画的，您可以在它们上面使用 CSS 变量，使用 JS 使它们动态化，...
那么这两个有什么区别呢？ （性能、渲染、...）
There are countless reasons why you should use a svg instead of a group of html elements:
Creation
There are hundreds of svg editors that allow in a simple way to realize a drawing or an icon. This is not the case for html. So drawing a building icon in full css would be really painful.
Sharing
The fact that it uses a standardized file such as svg, allows you to export your work to other tools and easily be exploited by someone else. Use tricky css rules to manipulate some span or div can be difficult for a newcomer to your project to understand.
User experience
On a website that use svg, you will able to open it on a new tab or to download it. Thats very comfortable for an user for exemple. If you use html an user will not be able to manipulate and thats can be really annoying
Performance
Because the svg is called most of the time a file you can compressed it on your server to gain more space and performance with some tools like Appendix J
我想知道您网站上的 CSS 图片和 SVG 是否有任何区别。
CSS 图片是指在 HTML 中使用 div 创建并在 CSS 中设置样式的图片（例如：https://codepen.io/andrewrock/pen/jOEZxrY）。
是的，CSS 图片更耗时，但除此之外它们都是可动画的，您可以在它们上面使用 CSS 变量，使用 JS 使它们动态化，...
那么这两个有什么区别呢？ （性能、渲染、...）
There are countless reasons why you should use a svg instead of a group of html elements:
Creation
There are hundreds of svg editors that allow in a simple way to realize a drawing or an icon. This is not the case for html. So drawing a building icon in full css would be really painful.
Sharing
The fact that it uses a standardized file such as svg, allows you to export your work to other tools and easily be exploited by someone else. Use tricky css rules to manipulate some
spanordivcan be difficult for a newcomer to your project to understand.User experience
On a website that use svg, you will able to open it on a new tab or to download it. Thats very comfortable for an user for exemple. If you use
htmlan user will not be able to manipulate and thats can be really annoyingPerformance
Because the svg is called most of the time a file you can compressed it on your server to gain more space and performance with some tools like Appendix J