Question

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

Answer 1

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

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

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

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

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

Answer 2

您可以使用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。虽然，此库主要用于数据可视化，可能并不完全符合您的需求。

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

2 个答案: