Как создавать иконки SVG и как реализовывать в веб-приложениях?

Question

Как создавать иконки SVG и как внедрять иконки SVG в наше веб-приложение?Можете ли вы кому-нибудь помочь в создании и внедрении веб-приложения?

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-иллюстратор.Там вы можете просто экспортировать файлы SVG.В HTML вы просто ссылаетесь на свой SVG-файл просто в атрибуте src тега.Например:

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

Чтобы установить размер в CSS, вы просто редактируете высоту и ширину изображения, например:

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

Когда вы плохо разбираетесь в дизайне, просто ищитебесплатно использовать значки или логотипы, может быть, вы найдете то, что вы можете использовать.