html - 如何创建 SVG 图标以及如何在 Web 应用程序上实现？

Question

如何创建 SVG 图标以及如何在我们的 Web 应用程序中实现 SVG 图标？您能否请任何人帮助创建和实施 Web 应用程序？

Answer 1

您可以使用 D3.js，这是一个可用于添加和操作 SVG 对象的库：https ://d3js.org/

一个简单的非常简单的实现示例如下所示：

d3.select('#container')
  .append('svg')
  .attr('height', 400)
  .attr('width', 400)


d3.select('svg')
  .append('rect')
  .attr('x', 100)
  .attr('y', 100)
  .attr('height', 400)
  .attr('width', 400)
  .attr('fill', 'black')

<div id="container">
  <h1>Sample SVG</h1>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

这会将 SVG 对象添加到容器 div，然后将黑色方块添加到 SVG。虽然，这个库主要用于数据可视化，可能不是您正在寻找的。

Answer 2

我也建议使用 adobe-illustrator。在那里您可以简单地导出 SVG 文件。在 HTML 中，您只需在标签的 src 属性中引用您的 SVG 文件。例如：

<img src="assets/icons/icon.svg" class="icon" alt="icon">

要在 CSS 中设置大小，您只需编辑图像的高度和宽度，例如：

.icon{
    width: 50%;
    height: auto;
}

当您不擅长设计时，只需搜索免费使用的图标或徽标，也许您会找到可以使用的东西。