0

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!

4
  • 1
    Una solución sería ponerlo todo en un documento .svg. Para esto tendrás que mover el javascript en el elemento svg. Lo puedes poner justo antes del cierre de la etiqueta </svg>: <script> <![CDATA[ // el script va aquí ]]> </script> Una observación más: utilizaría width="540" height="150" viewbox="0 0 540 150" en lugar de width="540" height="540" viewbox="0 0 540 540" De esta manera eliminas aquel espacio en blanco debajo del logo que podría causarte problemas.
    – enxaneta
    Commented el 15 ene. 2019 a las 19:09
  • 1
    Muchas gracias @enxaneta , tienes razón en lo del 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! Commented el 15 ene. 2019 a las 20:39
  • 1
    En codepen abres tu pen en debug. Abres el inspector, haces clic con el boton derecho sobre el svg y escoges copy > Copy outerHTML y lo pegas en otro pen.
    – enxaneta
    Commented el 16 ene. 2019 a las 10:18
  • 1
    @enxaneta ¡Maravilla! Aún no se abre bien en Illustrator, Photoshop etc., supongo que es por algunos elementos de código como el filtro de turbulencia o las máscaras que solo se renderizan bien en navegador, pero con este SVG puro sí puedo hacer una conversión a PNG a través de CloudConvert y lo hace perfecto. Esto ya es un gran paso para mi, en el peor de los casos me valdría perfectamente. ¡Muchísimas gracias! Commented el 16 ene. 2019 a las 11:35

1 respuesta 1

2

Finalmente y tras investigar y probar muchísimas cosas, la mejor solución que encontrado sin duda es ésta:

http://phrogz.net/SVG/svg_to_png.xhtml

Renderiza SVG inline incluso generado con JS, y te devuelve tanto el SVG puro como el PNG, lo cual es fantástico. Trasteando un poco con el código y eliminando u ocultando las opciones que no nos interesen, listo. Testado en Chrome, Safari y Firefox.

Créditos a Phrogz, que lo compartió en este hilo de StackOverflow.

He querido compartir la solución por si alguien se encuentra con una necesidad similar.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.