Problem with an SVG code in HTML

Question

I added svg code from a 3D image vector in my html code to animate with css. The problem is that the svg code is huge (3k lines of code or more) in HTML and it was the only way I could find to animate the svg elements separately because the file layers are separated by ID’S. there would be some way to hide the HTML svg code or something like?

Answer 1

Your question has loose ends. But I’ll give you some tips that might help you.

First we need to make it clear that vc can for example have an SVG where vc will animate its vectors using CSS properties like Transform, opacite, etc, all by CSS, but within the SVG itself. Or vc can animate everything directly with the SVG animation methods used his native tags as <animate>, <set> and <animateMotion> for example.

Regardless of the method, as even @Guilhermecostamilam commented vc can later call the SVG image in HTML, using the tag <img> same, ex: <img src="meu-svg.svg" alt="">

Example of SVG with native methods (here is a complete guide on how to natively animate Svgs https://css-tricks.com/guide-svg-animations-smil/)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" width="160" height="160">

  <circle cx="80" cy="80" r="50" />
  <g transform=" matrix(0.866, -0.5, 0.25, 0.433, 80, 80)">
    <path d="M 0,70 A 65,70 0 0,0 65,0 5,5 0 0,1 75,0 75,70 0 0,1 0,70Z" fill="#F00">
      <animateTransform 
      attributeName="transform" 
      type="rotate" 
      from="360 0 0" 
      to="0 0 0" 
      dur="1s" 
      repeatCount="indefinite" />
    </path>
  </g>
  <path d="M 50,0 A 50,50 0 0,0 -50,0Z" transform="matrix(0.866, -0.5, 0.5, 0.866, 80, 80)" />

</svg>

---

Example using CSS within SVG itself.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" width="160" height="160">
  <defs>
    <style>
      #triangle {
        -webkit-transform-origin: 50% 65%;
                transform-origin: 50% 65%;
      }
      #triangle polygon {
        stroke-dasharray: 17;
        -webkit-animation: dash 2.5s cubic-bezier(0.35, 0.04, 0.63, 0.95) infinite;
                animation: dash 2.5s cubic-bezier(0.35, 0.04, 0.63, 0.95) infinite;
      }
      @-webkit-keyframes dash {
        to {
          stroke-dashoffset: 136;
        }
      }
      @keyframes dash {
        to {
          stroke-dashoffset: 136;
        }
      }
      @-webkit-keyframes rotate {
        100% {
          -webkit-transform: rotate(360deg);
                  transform: rotate(360deg);
        }
      }
      @keyframes rotate {
        100% {
          -webkit-transform: rotate(360deg);
                  transform: rotate(360deg);
        }
      }
    </style>
  </defs>

  <g id="triangle" width="160px" height="160px" >
    <polygon fill="#EFEFEF" stroke="#333333" stroke-width="1" points="16,0 32,32 0,32"></polygon>
  </g>

</svg>

---

The point here is that regardless of the animation technique you can index your SVG to HTML like any image <img src="meu-svg.svg" alt=""> . So if you want to animate with CSS you don’t need HTML for this.

Here is a link from an Animated SVG with internal and imported CSS as an image in an HTML: https://hugocsl.github.io/svg/stof.html

Also, vc tb can animate your SVG in some software like Svgator for example and then export the animation. (https://www.svgator.com/)