¿Cómo usar SVG en Bubble.io?

Incorporar imágenes SVG en tu aplicación Bubble.io puede mejorar significativamente la calidad visual y la escalabilidad de tus gráficos. Aquí te presentamos una guía sencilla sobre cómo utilizar SVGs en Bubble.io:

Paso 1: Prepara tu archivo SVG. Asegúrate de que tu archivo SVG esté optimizado y que su tamaño de archivo sea inferior a 1 Mb para evitar problemas de rendimiento en los dispositivos locales. Puedes usar herramientas como Adobe Illustrator o Inkscape para crear y optimizar archivos SVG.

Paso 2: Inicia sesión en tu panel de control de Bubble.io. Entra en el editor de la aplicación donde quieres incluir el SVG.

Paso 3: Añade un elemento HTML a tu página. Desde el menú de Elementos Visuales en el lado izquierdo, arrastra y suelta el elemento HTML en tu página donde quieres que aparezca la imagen SVG.

Paso 4: Ajusta el tamaño del elemento HTML en consecuencia. Ajusta el ancho y la altura del elemento HTML para que se ajuste al SVG.

Paso 5: Incorpora el código SVG. Haz clic en el elemento HTML que acabas de añadir para abrir su editor de propiedades. Tendrás que pegar el código XML de tu imagen SVG en este editor. Si tu archivo SVG está guardado en tu ordenador, puedes abrirlo con un editor de texto, como el Bloc de notas o Sublime Text, para copiar el código.

Paso 6: Ajusta las configuraciones de visualización. Para mantener la capacidad de respuesta y asegurar un escalado correcto en diferentes dispositivos, evita codificar valores de ancho y altura en el código XML del SVG a menos que sea necesario. En su lugar, puedes usar CSS dentro del elemento HTML para configurar el SVG con un ancho del 100% y una altura automática para mantener su relación de aspecto.

Paso 7: Protege tu aplicación. Aunque permitir la entrada de HTML puede proporcionar una mayor flexibilidad de diseño, es crucial asegurarte de que el código que estás incorporando es seguro y no expondrá tu aplicación a vulnerabilidades de seguridad.

Paso 8: Previsualiza tu página. En el editor de Bubble.io, utiliza la función de vista previa para ver cómo se ve tu SVG en la aplicación. Verifica si se escala correctamente y mantiene su resolución en diferentes tamaños de pantalla.

Paso 9: Realiza los ajustes necesarios. Si el SVG no se muestra como esperabas, vuelve al editor de propiedades del elemento HTML y realiza los cambios necesarios en el código o estilo.

Paso 10: Guarda y despliega. Una vez que estés satisfecho con cómo se muestra el SVG en la vista previa, guarda tus cambios y despliega las actualizaciones en tu aplicación en vivo.

Recuerda, los SVGs son geniales para ilustraciones, iconos y otros gráficos porque pueden escalar sin perder resolución. Esta capacidad es particularmente valiosa para las pantallas de alta densidad y el diseño responsive en las aplicaciones de Bubble.io.