He creado un logotipo generativo mediante SVG y JS para un proyecto un poco especial. En navegador todo perfecto, funciona bien y puedo incrustarlo en una página web mediante <object>
.
Pero ahora necesito que, de alguna manera, el logotipo generado se pueda exportar a un formato de imagen para trabajar con él en programas como Illustrator o Photoshop, para diseñar piezas corporativas. Lo ideal sería un formato vectorial como SVG o PDF, pero PNG con fondo transparente también me serviría.
Crear un documento SVG que incluya el código javaScript me sirve para incrustarlo en web mediante <object>
, pero no me sirve para trabajar con editores gráficos, ya que éstos no interpretan el javaScript. Lo que necesito es exportar el logo una vez generado, el logo resultante después de funcionar el código. Es hacer una exportación de lo que se está viendo en ese momento.
Dejo enlace al CodePen. Presionando "Run" se van generando logos aleatoriamente: https://codepen.io/anxovizcaino/pen/NeOQGj
También he creado un generador de patrones que, del mismo modo, me gustaría poder exportar una vez generado: https://codepen.io/anxovizcaino/pen/MZrOqj
Nota: El código del logo es complejo porque solo defino un cuadrado y un círculo al principio, y el resto del logotipo es generado mediante elementos <use>
y transformaciones. Esta premisa no puedo cambiarla porque es fundamental por motivos conceptuales (todo parte de un círculo y un cuadrado del mismo área: la cuadratura del círculo).
Soy diseñador, mis conocimientos en JS y de programación en general son limitados (he aprendido sobre la marcha para este proyecto).
¡Muchas, infinitas gracias de antemano!
</svg>
: <script> <![CDATA[ // el script va aquí ]]> </script> Una observación más: utilizaríawidth="540" height="150" viewbox="0 0 540 150"
en lugar dewidth="540" height="540" viewbox="0 0 540 540"
De esta manera eliminas aquel espacio en blanco debajo del logo que podría causarte problemas.height="150"
, se me debió pasar. En cuanto a la solución que propones, se me olvidó aclarar que eso es lo que hice para obtener un solo archivo .svg que después incrustaré en la web mediante<object>
, pero lamentablemente ese archivo no me sirve para trabajar con editores gráficos, porque éstos no interpretan el código JS. Necesitaría exportar el logo una vez se ha generado en el navegador, es decir, exportar lo que se está viendo en ese momento. ¡Gracias de nuevo!