Bonjour
Dans un navigateur chrome, tu charges ta page. Puis tu fais click droit => inspecter. Puis tu cliques sur "Lighthouse". Ça fait un diagnostic de ta page sur plein de critères. Si Lighthouse ne fait pas de remarques sur les images sur lesquelles tu te poses des questions, ce sera déjà pas mal.
Maintenant, en ce qui concerne le fait de préciser des % ou des pixels pour les tailles des images, certains disent qu'il faut le faire le plus possible en pixels et de préférence corrspondant à la taille intrinsèque de l'image (en ayant éventuellement plusieurs versions de l'image dans différentes tailles) . Ok, admettons que ce soit une bonne pratique pour les images pixélisées gif, jpg, png etc. (même si je n'ai jamais été convaincu de la chose à 100%).
Mais pour du svg, l'image est "recalculée" par le navigateur en fonction des instructions qui se trouvent dans le svg de toute façon. Par conséquent, un width="100%" et height="100%" ne devrait pas vraiment pénaliser la vitesse d'affichage de l'image par rapport à une taille en pixels. Tout au plus on pourra arguer que préciser des pixels permet au navigateur de réserver "plus facilement" une place appropriée pour l'image dès le chargement initial de la page même si le fichier contenant l'image n'est pas encore arrivé dans le navigateur. Possible, mais mon expérience me fait dire que si la différence est perceptible par l'internaute, c'est que ta page a bien d'autres problèmes qu'il est plus important de résoudre que cette histoire de dimension d'image svg déclarée en % versus en pixels.
Après, la plupart du temps, quand on définit une taille en pixel pour une image svg, ce n'est pas pour des questions d'efficacité mais tout simplement parce qu'on veut qu'elle ait cette taille-là en pixels (typiquement une icône) quelque soit la taille du conteneur.
Par contre, ce qui est sûr, c'est que c'est beaucoup plus facile pour le développeur de rendre une image responsive avec une taille width="100%" et height="100%" qu'avec une taille en pixels, et qu'il a donc beaucoup plus de chances de faire un code efficace en faisant ça.
Enfin pour la question des écrans retina ou 4K, ça ne change rien me semble-t-il que ce soit des pixels ou des %. Ton image en svg sera au maximum de sa netteté sur ces écrans sans que tu aies besoin de faire quoique ce soit (alors que pour les images en pixels, il faut éventuellement combiner pour obtenir une netteté maximale).
Amicalement,
