Photoshop Question posted in
The official user guide can be found here.

How to create SVG icons and how to implement on web applications? – Photoshop

How to create SVG icons and how to implement the SVG icons on our web application? Can you please anyone help to create and implement on web application?

Tags:

2

Answers


  1. 0

    I’d suggest adobe-illustrator, too. There you can simply export SVG Files. In HTML you just reference your SVG-File simply in the src attribute of an tag. For example:

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

    To set the size in CSS you just edit the height and width of the image, for example:

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

    When your not good at designing just search for free to use icons or logos maybe you’ll find something you can use.

    Login or Signup to reply.
  2. 0

    You can use D3.js, which is a library you can use to add and manipulate SVG objects: https://d3js.org/

    A simple very simple example of implementation would look like this:

    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>

    This adds an SVG object to the container div then adds a black square to the SVG. Although, this library is primarily for data visualization and may not be exactly what you are looking for.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search