SVG graph and Javascript: Which is the best way to add animation to and SVG file?

I’m new at coding.

I’m studying the way to make an animated portfolio like Sean Halpin or Stephanie Walter one. I want to put a face, in which, blinking eyes and a moving the mouth would be the animated elements. Basically, I want to play with the visibility of the closed eyes and open mouth. As an example, I drew a face as follows:

<svg id="Capa_1" data-name="Capa 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 429 429"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:none;stroke:#000;stroke-miterlimit:10;}</style></defs><g id="face"><path class="cls-1" d="M611,608.5a214,214,0,1,1,151.32-62.68A212.6,212.6,0,0,1,611,608.5Z" transform="translate(-396.46 -180)"/><path d="M611,181a212.9,212.9,0,1,1-83.1,16.78A212.11,212.11,0,0,1,611,181m0-1c-118.46,0-214.5,96-214.5,214.5S492.5,609,611,609s214.5-96,214.5-214.5S729.43,180,611,180Z" transform="translate(-396.46 -180)"/></g><g id="eyes"><g id="eye_r"><circle class="cls-1" cx="319.15" cy="128.63" r="48.5"/><path d="M715.61,260.62a48,48,0,1,1-48,48,48.06,48.06,0,0,1,48-48m0-1a49,49,0,1,0,49,49,49,49,0,0,0-49-49Z" transform="translate(-396.46 -180)"/></g><g id="iris_r"><circle cx="319.15" cy="128.63" r="19"/></g><g id="eye_l"><circle class="cls-1" cx="109.85" cy="128.63" r="48.5"/><path d="M506.32,260.62a48,48,0,1,1-48,48,48.06,48.06,0,0,1,48-48m0-1a49,49,0,1,0,49,49,49,49,0,0,0-49-49Z" transform="translate(-396.46 -180)"/></g><g id="iris_l"><circle cx="109.85" cy="128.63" r="19"/></g><line id="closed_eye_l" class="cls-2" x1="62.04" y1="128.5" x2="158.04" y2="128.5"/><line id="closed_eye_r" class="cls-2" x1="270.69" y1="128.23" x2="366.69" y2="128.23"/></g><g id="closed_mouth"><ellipse cx="214.5" cy="309" rx="108.5" ry="11.5"/><path d="M611,478c29.08,0,56.41,1.25,77,3.51,30.68,3.38,31,7.32,31,7.49s-.35,4.11-31,7.49C667.37,498.75,640,500,611,500s-56.41-1.25-77-3.51c-30.69-3.38-31-7.32-31-7.49s.35-4.11,31-7.49c20.55-2.26,47.88-3.51,77-3.51m0-1c-60.2,0-109,5.37-109,12s48.8,12,109,12,109-5.37,109-12-48.8-12-109-12Z" transform="translate(-396.46 -180)"/></g></svg>

So, I thought three ways to do this:

  1. Place the svg inside an tag, calling then a function that takes into consideration the loading of the file. An example of what I’m saying is found in the following resource: https://www.petercollingridge.co.uk/tutorials/svg/interactive/javascript/, in the “External SVG + External JavaScript” part. It didn’t work. The contentDocument ALWAYS returns “null”.

In my example, it would be:

HTML:

<object id="face" data="path/to/face.svg" type="image/svg+xml"></object>

JS:

<script type="text/javascript">
  window.addEventListener("load", function() {
    var svgObject = document.getElementById('face').contentDocument;
    var svg = svgObject.getElementById('closed_eye_r');
    svg.style.visibility="hidden";
  });
</script>
  1. Inline SVG – call a “transform” property. Sean Halpin does it but I’m not sure what he does.

HTML: https://www.seanhalpin.design/
JS: https://www.seanhalpin.design/js/scripts.js

  1. Inline SVG, use getElementById and apply functions to animate the internal parts of the SVG file.

Questions:

a. Is Inline SVG a good practice?
b. Which is the best way to animate an SVG?

I hope to have been clear. Let me know if something is not well presented, I want to learn to edit questions in order to make them as clear as possible.

Thanks!