Básicamente, es para mejorar el rendimiento. En SVG, cuanto mayor es la cantidad de elementos, menos eficiente es el rendimiento o, en palabras más simples, disminuyen los fps. Estoy tratando de mejorar algunos problemas de rendimiento en mi biblioteca de ilustraciones SVG ( ChelseaJS ) cuando se trata de una gran cantidad de elementos. ¿Hay alguna manera? Podría fusionar formas, por ejemplo, en lugar de dos elementos rectangulares, puede ser solo un elemento. pd: no sugiera la etiqueta <g></g> , porque es como una caja para mantener los elementos juntos.
Comenzaría reduciendo la precisión, tal vez no se requiera 70.00000000000001 .
A menos que tenga una nueva pantalla elegante de 256PP^2*, por supuesto.
<polygon points="160,150 105,158.6602540378444 70.00000000000001,201.96152422706632 90,150 69.99999999999997,98.0384757729337 105,141.3397459621556" stroke="#44d" stroke-width="2" fill="#695fe6" fill-opacity="0.3"></polygon>obtenga su estrella:https://beetrandahiya.github.io/ChelseaJS-docs/shapes/star.html
(*) PP = Petabyte Pixels Horizontal y Verticalmente;
disponible de Metazonappoogle en 2032.00000001
De https://codepen.io/tigt/post/improving-svg-rendering-performance :
Una de las obviedades del rendimiento de las computadoras es que los números enteros son más rápidos que los números fraccionarios, oficialmente "números de punto flotante". La gente de <canvas> conoce este truco desde hace años.
Esto generalmente se soluciona tomando todos los números en el SVG (coordenadas de viewBox, datos, atributos de alto y ancho) y redondeándolos/multiplicándolos hasta que dejen de tener decimales.