Как правильно визуализировать и анимировать иконки svg?

Question

Я пытаюсь использовать svg files и показывать их как значки. Однако у меня возникают некоторые проблемы

1. я не смог загрузить файл icon.svg внутри svg тега. В итоге я использовал тег object.

2. Я хотел бы добавить анимацию в мой svg. Я в конечном итоге делает его в файл icon.svg как таковой <animate dur="5s" values=...; ></animate>, который бросает эту ошибку в браузере SVG's SMIL animations (<animate>, <set>, etc.) are deprecated and will be removed. Please use CSS animations or Web animations instead.

3. Что такое лучший способ сделать все это в нефритом/html? Это то, что я сейчас ..

   # footer.tpl.jade 
   
   footer.footer 
       +nav 
       .logo.logo--footer 
       h3.logo__title.logo__title--footer 
        a.logo__link(href='/') Frit 
        br/ 
        a.logo__link(href='/') Mark 
        p.footer__content All rights reserved or whatever. Please refer to the about section & terms-of-service for the appropriate info. All rights reserved. 
        object.icon--heart(type='image/svg+xml', data='icons/heart-icon.svg') 
        | Copyright © 2016 Belgium. 
   
   
   
   
   
   #_icons.scss 
   
   .icon { 
   
       &--heart { 
       width: 25px; 
       height: 20px; 
   
       // Will like to add all the animation here 
   
       } 
   } 
   

сердце icon.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 37 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><path class="heart--pulse" id="Heart-Icon" d="M18,11.316c3.368,-5.316 10.105,-5.316 13.474,-2.658c3.368,2.658 3.368,7.974 0,13.29c-2.358,3.986 -8.421,7.973 -13.474,10.631c-5.053,-2.658 -11.116,-6.645 -13.474,-10.631c-3.368,-5.316 -3.368,-10.632 0,-13.29c3.369,-2.658 10.106,-2.658 13.474,2.658Z" style="fill:hsla(60, 100%, 75.1%, 1);"> 
    <animate dur="5s" values="hsla(0, 100%, 75.1%, 1); hsla(60, 100%, 75.1%, 1); hsla(0, 100%, 75.1%, 1)" attributeName="fill" repeatCount="indefinite"></animate> 
</path><g id="Remove-Icon"><clipPath id="_clip1"><polygon points="140.007,3.906 172.007,3.92 171.993,34.007 139.993,33.993 140.007,3.906 "/></clipPath><g clip-path="url(#_clip1)"></g></g></svg> 

Answer 1

Так что я понял, как отображать иконки. Ниже мой рабочий код. Я использовал это в качестве ссылки: SVG sprites & это SVG sprites css tricks

SVG-defs.svg

<svg style='display:none;' xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <defs> 
     <symbol id='heart-icon' viewBox='0 0 32 32'> 
      <title>Heart Icon</title> 
      <desc>heart-icon-svg</desc> 
      <path class="heart--pulse" id="Heart-Icon" d="M18,11.316c3.368,-5.316 10.105,-5.316 13.474,-2.658c3.368,2.658 3.368,7.974 0,13.29c-2.358,3.986 -8.421,7.973 -13.474,10.631c-5.053,-2.658 -11.116,-6.645 -13.474,-10.631c-3.368,-5.316 -3.368,-10.632 0,-13.29c3.369,-2.658 10.106,-2.658 13.474,2.658Z" style="fill:hsla(60, 100%, 75.1%, 1);"> 
      </path> 
     </symbol> <!-- End of heart-icon --> 

     <symbol id="signup" viewBox= '0 0 32 32'> 
      <title>Sign up Icon</title> 
      <desc>signup-icon-svg</desc> 
     </symbol><!-- End of signup-icon --> 

     <symbol id="user-icon" viewBox= '0 0 64 64'> 
      <title>User Icon</title> 
      <desc>user-icon-svg</desc> 
      <g id="Remove-Icon"> 
       <clipPath id="_clip1"> 
        <polygon points="416.013,24 448.013,24.014 448,54.101 416,54.087 416.013,24 "/> 
       </clipPath> 
       <g clip-path="url(#_clip1)"></g> 
      </g> 
      <g id="SignIn-Icon"> 
       <path d="M45.693,58.232c0.518,1.296 0.36,2.764 -0.423,3.92c-0.782,1.156 -2.087,1.848 -3.483,1.848c-5.633,0 -13.894,0 -19.539,0c-1.404,0 -2.716,-0.696 -3.504,-1.859c-0.787,-1.162 -0.947,-2.64 -0.426,-3.943c1.491,-3.731 3.36,-8.41 4.525,-11.325c0.668,-1.672 2.282,-2.773 4.082,-2.785c2.64,-0.018 6.507,-0.044 9.351,-0.063c2.246,-0.015 4.273,1.347 5.107,3.432c1.185,2.962 2.915,7.289 4.31,10.775Z" style="fill:hsla(0, 0%, 98.8%, 1);"/> 
       <ellipse cx="32" cy="32" rx="10.581" ry="13.266" style="fill:hsla(0, 0%, 98.8%, 1);"/> 
      </g> 
     </symbol><!-- End of signup-icon --> 

    .... omitted code 
    </defs> 
</svg> 

footer.tpl.jade (шаблонов)

 svg.icon--heart.heart--pulse 
      use(xlink:href='/icons/svg-defs.svg#heart-icon')