Estoy creando SVG directamente en el cliente. Por lo tanto, en mi Javascript en el cliente, estoy creando el SVG sin formato y manipulo según la entrada del usuario. Tomé el SVG sin procesar y lo coloqué en un archivo y luego mostré ese archivo SVG justo al lado del SVG en línea sin procesar. El resultado fue mucho más crujiente. Aquí está el SVG en línea sin formato: 
Compare esto con el SVG cuando se coloca en un archivo y usa una etiqueta: 
Como se puede ver la calidad varía mucho!
Aquí hay un enlace de codepen para que pueda obtener directamente el SVG sin procesar si desea realizar pruebas: https://codepen.io/fabiansvensson/pen/WNMJpQr
<html> <body> <!-- THE RAW SVG --> <svg></svg> </body> </html>Es importante destacar que noté que la calidad parece ser mejor en el codepen, lo que me lleva a pensar que quizás el problema tenga algo que ver con el estilo de la página. No he sido capaz de encontrar ninguna razón por la que esto podría ser. Estoy considerando escribir el SVG sin procesar directamente en el archivo (no es lo ideal) o de alguna manera hacer que el estilo del SVG sea independiente del resto de la página (por ejemplo, iFrame).
¿Alguna idea de qué podría estar causando esto y cómo resolver el problema?