具有SVG的CSS：现实世界使用

svg：深入研究CSS

>的样式和操纵

可伸缩矢量图形（SVG）是一种基于XML的轻巧矢量图像格式，非常适合Web图形。 它对交互性和动画的支持，再加上出色的浏览器兼容性（自IE9以来），使其成为现代网络开发的强大工具。本文探讨了CSS风格和操纵SVG的利用，从而增强了其在网络设计中的多功能性。

> svg的关键优点

• >可伸缩性：与栅格图像（PNG，JPG，GIF）不同，SVGS保持清晰度的任何尺寸，非常适合徽标和图标。> >
CSS样式：
• 使用CSS在DOM中直接样式并操纵SVG元素，从而启用动态交互并在多个SVG上进行一致的样式。 svg Sprites：
>将多个图像合并到一个文件中，通过减少HTTP请求并改善缓存来优化性能。>
• 高级功能：支持动画和独立SVG文件中的互动性的支持将其应用程序扩展到简单的图形之外。
• >为什么svgs胜过位图

>

>位图格式通过像素定义图像颜色像素。 一个小图像需要数千个像素，即使在压缩后也会产生较大的文件尺寸。 放大位图导致像素化。 基于向量的SVGS，使用点，线和曲线定义图像。这会导致较小的文件大小和卓越的可扩展性。 例如，与更大的等效PNG或JPG相比，SVG中的简单圆圈可能低于150个字节。 另外，SVG背景本质上是透明的。 XML结构还可以增强可访问性和SEO。

svg创建工具

虽然了解基本的SVG图是有益的，但专门的工具简化了创建复杂形状并生成代码：：

商业： Adob​​e Illustrator，亲和力设计师，素描

开源： inkscape

在线（免费/商业）：
• ：吸引人设计师，Vectr，SVG-Edit，Boxy Svg，Vecteezy
• 图表库：使用JavaScript从数据中生成SVG图表。
SVGO和SVGOMG之类的工具可以进一步优化针对较小文件尺寸的生成的SVG代码。
• 使用svgs作为静态图像
• > >
但是，SVG中的交互元素被禁用。 可以应用CSS变换和过滤器，通常会产生比位图缩放的较高结果。

>

> css

中的svg背景

>直接在CSS中插入SVG，因为背景图像对于可重复使用的小图标有效，避免了额外的HTTP请求：

.myelement {
  background-image: url("mybackground.svg");
}

> PostCSS Assets插件之类的工具简化此过程。>

>响应式SVG图像

对于响应式设计，请确保在标签中定义默认宽度和高度以防止尺寸问题：>

然后使用CSS：<svg>

.mysvgbackground {
  background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 800 600" xmlns="https://www.w3.org/2000/svg"><circle cx="400" cy="300" fill="#ff0" r="50" stroke="#f00" stroke-width="5"></circle></svg>') center center no-repeat;
}

html启用的SVG图像

<svg xmlns="https://www.w3.org/2000/svg" width="400" height="300"></svg>

将SVG直接嵌入HTML使其成为DOM的一部分，允许CSS和JavaScript操纵：

> 然后，CSS可以靶向特定的SVG元素：>

这允许使用

，过渡和动画进行动态样式。

>

img {
  display: block;
  max-width: 100%;
  height: auto;
}

SVG Sprites：有效的图标管理

<svg id="invader" xmlns="https://www.w3.org/2000/svg" viewBox="35.4 35.4 195.8 141.8">
  <path d="..."></path>
</svg>

>将多个图标组合到单个SVG文件中，使用:hover元素：

使用>在html中引用图标：

这可以提高性能，但需要仔细处理跨浏览器的兼容性和有效的缓存。 诸如Ajax加载和注入之类的技术可以解决这些挑战。<symbol>>

#invader {
  width: 200px;
  height: auto;
}

#invader path {
  stroke-width: 0;
  fill: #080;
}

> SVG对HTML内容的影响（掩模，剪辑，过滤器）

<use>>

>利用CSS

<svg>
  <defs>
    <symbol id="icon-folder" viewBox="0 0 32 32">...</symbol>
  </defs>
</svg>

，和属性，以将屏蔽，剪切和视觉过滤器等效果应用于SVG元素。 CSS中引用SVG元素允许进行复杂的视觉操作。 带有嵌入式互动性的独立SVG

>独立的SVG文件可以包括CSS，JavaScript甚至位图，创建独立的交互式图形。 这允许在不依赖外部资源的情况下分发交互式内容。>

结论

mask 与CSS结合使用clip-path> SVG，为Web图形提供了强大而有效的方法。 它的多功能性从简单的静态图像扩展到复杂的交互式动画，提供了许多增强Web设计的可能性。

以上是具有SVG的CSS：现实世界使用的详细内容。更多信息请关注PHP中文网其他相关文章！