Flujos creativos prácticos
Repara un logotipo SVG recortado sin redibujar sus trazados
El asa de la taza ha desaparecido del logotipo de tu tienda, aunque sus curvas siguen en el archivo. Volver a trazar la vista recortada convertiría un problema de encuadre en otro dibujo.
Este ejemplo repara en Ciyo una marca de una tienda de cerámica ficticia. Descarga el SVG recortado y el corregido; compara su código y sus vistas antes de sustituir el archivo de tu web.
Conserva el archivo recortado junto al original
Trabaja con el SVG, no con una captura de su vista incompleta. Guarda una copia de trabajo y conserva los datos originales. El ejemplo contiene un único trazado compuesto de color carbón con un hueco transparente en el asa.
Ambos archivos tienen una salida de 800×500. El viewBox incorrecto, 0 0 1024 1024, deja buena parte de la taza fuera del encuadre visible. La taza completa que aparece al lado es la reparación, no un nuevo logotipo generado.
Localiza el dibujo antes de cambiar el encuadre
Pide los límites reales de las curvas, incluidos sus puntos de giro. Aquí llegan a x≈490.710–1620.830 e y≈693.803–1363.685. Medir solo los nodos subestimaría los bordes derecho e inferior.
MDN describe cuatro valores de viewBox: x mínimo, y mínimo, anchura y altura. La salida y el encuadre antiguo tienen proporciones distintas: revisa el renderizado, sin equiparar cada borde visible directamente a esos números.
Dale a Ciyo un encargo acotado
Facilita el texto SVG o un archivo fuente que el agente pueda leer. Pide un informe del dibujo existente, una corrección independiente y dos renderizados guardados en el lienzo.
El encargo siguiente corresponde a esta muestra. Para otro logotipo, pide que calcule un encuadre con margen; trasladar estas coordenadas a una geometría distinta puede provocar otro recorte.
Inspecciona este SVG sin redibujarlo. Indica los límites reales de sus curvas. En esta muestra, conserva cada d, fill y fill-rule, mantén width=800 y height=500 y guarda una copia con viewBox="430 630 1260 790". Renderiza los SVG recortado y corregido como PNG transparentes de 800×500 y guárdalos en el lienzo. Comprueba la taza completa y el hueco del asa. Explica los cambios y sus límites.Comprueba los cambios en el código
El viewBox corregido es 430 630 1260 790. Anchura, altura, d, fill y fill-rule son idénticos en los dos SVG descargables. Cambiar el encuadre modifica escala y posición aparentes, no conserva las posiciones de los píxeles de la vista anterior.
Compara los archivos antes de aprobarlos. Añadir un trazado, un fondo o una imagen incrustada excedería el alcance de esta reparación.
| Comprobación | Antes | Después |
|---|---|---|
| Salida | 800×500 | 800×500 |
| viewBox | 0 0 1024 1024 | 430 630 1260 790 |
| Geometría | Un trazado compuesto existente | d, fill y fill-rule idénticos |
| Resultado visible | Base y asa recortadas | Silueta completa y hueco transparente |
Revisa la silueta y el hueco transparente
El PNG corregido mide 800×500, con márgenes transparentes de unos 39px a la izquierda, 45px a la derecha, 40px arriba y 35px abajo. La base y el asa caben enteras; el hueco sigue transparente.
Abre el SVG en un navegador al tamaño previsto. El lienzo muestra vistas PNG, mientras el SVG descargable conserva los trazados. La vista sirve para revisar, pero no sustituye al original vectorial.
Detente si la geometría no está en el archivo
El método funciona porque las curvas existen. Un trazado ausente, una máscara, un recorte interno o CSS overflow requieren otro diagnóstico. Ampliar viewBox no reconstruye un dibujo que nunca se guardó.
Conserva juntos el original y la reparación. Las muestras permiten repetir la comprobación del encuadre en el navegador; no acreditan un corte físico ni una importación en otra aplicación.
Preguntas prácticas
¿Un viewBox mayor recupera un trazado perdido?
Solo puede mostrar geometría que ya existe. Inspecciona el código si el trazado está ausente.
¿Se ha redibujado la taza?
No. d, fill y fill-rule son idénticos entre ambos archivos; solo cambia viewBox.
¿Por qué parece mayor la taza reparada?
El nuevo encuadre lleva otra región del mismo dibujo a la salida de 800×500. Evalúa por separado la geometría y el tamaño aparente.
Dale un encuadre útil al logotipo existente
Abre Ciyo, inspecciona el SVG y compara la corrección con el original antes de reemplazar el archivo de tu web.