¿Es posible subir el logotipo en formato svg para que no se vea pixelado al hacer zoom en la imagen?  

Página 1 / 2
 
Rodrigo Martín
 Rodrigo Martín
Usuario eminente

Hola, muy buenas:

Después de contratar a un artista profesional para el rediseño del logotipo de nuestra web. Nos entregaron el logo en formato jpg y ai (adobe ilustrator). Ahora solo nos falta subirlo a la web de la forma más profesional posible.
Como la imagen jpg estaba en un tamaño muy grande (medidas) con photoshop redujimos la imagen (de manera proporcional) , subimos esta imagen a la web, pero notamos que si hacemos zoom en la pantalla, para ver más grande el logo, la imagen se ve pixelada ( pierde calidad, se distorsiona), lo intentamos también en formato png , queda algo mejor pero continúa el problema. Por último abrimos el archivo con formato ai ( adobe ilustrator ) en ilustrator, y lo convertimos a svg con la idea de subirlo en este formato ( vectorial ), pero parece que prestashop no lo admite o vuelve a transformar la imagen a jpg, ya que al inspeccionar el logo, nos muestra que está en jpg.
Nos gustaría dar con la solución, de manera que si se hace zoom en el navegador, para aumentar el tamaño de la pantalla, el logo continúe viéndose perfecto.
Ahora mismo no está del todo mal, pero intentamos cuidar al máximo cada detalle y transmitir en la web el cariño, esfuerzo y profesionalidad con la que hemos intentado trabajar en cada momento.
Fuera de la web, se puede ampliar el tamaño ( medidas) de la imagen, o reducir y no pierde calidad gráfica.
Gracias, saludos.

URL del sitio: Contenido solo visible a usuarios registrados

Citar
Respondido : 11/08/2017 6:34 pm
Jhon Marreros Guzman
 Jhon Marreros Guzman
Soporte CMS Webempresa Moderator

Hola

En el caso de PrestaShop para incluír el logo .svg tendrías que hacerlo directamente en los archivos del theme ya que como comprabaste de manera nativa no lo soporta.

Para saber que archivo tocar, depende del theme que estas usando, sin embargo de manera general debes buscar el archivo header.tpl

Saludos.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.

ResponderCitar
Respondido : 11/08/2017 7:40 pm

Cursos Gratuitos WordPress

Rodrigo Martín
 Rodrigo Martín
Usuario eminente

Gracias por tu respuesta.
He visto el archivo header.tpl, pero no se como subir el logo en svg.
He visto este tutorial: http://antonio-ventura.com/logo-in-svg-format/ , no se si será correcto para mi caso,
o quizás me recomiendas otra manera de hacerlo. Algún otro tutorial, algún vídeo ...
Saludos

ResponderCitar
Respondido : 12/08/2017 10:55 am
Luis Mendez Alejo
 Luis Mendez Alejo
Miembro Admin

Hola Rodrigo,

He revisado el post de Antonio Ventura y aparentemente parece viable (no lo he probado). Su post es de 2014 y muchas cosas han cambiado en PrestaShop desde entonces por lo que si lo pruebas haz primero una copia de seguridad de tu web y específicamente de los archivos a modificar para evitar contratiempos.

Saludos

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¡Gracias!.

ResponderCitar
Respondido : 13/08/2017 3:52 am

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Rodrigo Martín
 Rodrigo Martín
Usuario eminente

Buenos días, gracias. He seguido las indicaciones del tutorial, pero como resultado no se ve el logo. Ni en jpg ni en svg. Solo se ve cuando la web está en modo mantenimiento.

Explico algunos detalles y dudas, es posible que notéis algún error de mi parte:

Mi archivo header.tpl , en las líneas a las que hace referencia el tutorial, estaba asÏ:

Y LO HE DEJADO TAL CUAL PONE EL TUTORIAL

CON RESPECTO A LA IMAGEN CON EL LOGO, HE RENOMBRADO AL LOGO, COMO logo.svg y lo he colocado en la carpeta img de la carpeta themes(mi plantilla)

POR ÚLTIMO, he abierto el archivo global.css , y he agregado el código que indica el tutorial, lo he agregado en la parte final del archivo, dejo una copia aquí de como ha quedado esa parte final, incluyendo unas lineas anteriores.

font-size: 17px; padding: 8px 29px 10px; }table#product_comparison .prices-container .old-price { padding: 0 10px; }#habla_window_div #habla_topbar_div { background: #161717 !important; }.label-danger,.label-success { color: #fff; padding: 6px 7px 5px; margin-bottom: 3px; font: 300 12px/1 Arial, Helvetica, sans-serif; border-radius: 0; border: none; }li { list-style-type: none; }ul.step li.step_current,ul.step li.step_current span:after { background: #158423; border-color: #158423; }ul.step li.step_done a:after,ul.step li.step_done.step_done_last a:after,ul.step li.step_done { background: #232323; border-color: #000; color: #5d6a7f; }ul.step a:hover,ul.step a:hover:after { background: #161717 !important; border-color: #161717 !important; }.block .products-block li .products-block-image { background-color: #fff; }.account_creation :nth-child(9) { display: none !important;}.checkbox label { color: #30b0fb!important;}/*************************************************************** EXTRA STYLES - MODIFICACIONES 2017-07-04****************************************************************//******************************* BLOCK GENERAL********************************/@media (max-width:767px) AND (min-width:480px){ #htmlcontent_top ul.htmlcontent-home { margin-top: 0; }}@media (max-width:767px){ .stickUpTop { background: #000; }}/******************************* END BLOCK GENERAL********************************/
#header_logo {
fondo: url (../ img / logo.svg) no-repeat scroll 0 0/100% 100% RGBA (0, 0, 0, 0);
display: inline-block;
anchura: 330px;
altura: 150 píxeles;

}

#header_logo a {
display: block;
altura: 150 píxeles;
overflow: hidden;
text-indent: -34em;
}

#header_logo a: focus {
frontera: medio ninguno;
Esquema: medio ninguno;
}
#header_logo a: active {
frontera: medio ninguno;
Esquema: medio ninguno;
}

Gracias, saludos!

ResponderCitar
Respondido : 14/08/2017 11:12 am
Jhon Marreros Guzman
 Jhon Marreros Guzman
Soporte CMS Webempresa Moderator

Hola

En el tutorial lo pone como fondo de una etiqueta de link, esto es más complicado, simplemente en código que tienes

Cambia simplemente la ruta:
src="{$logo_url}"

Suponiendo que tu logo esta en la raiz de tu sitio, entonces:
Por la ruta en donde esta tu logo
src="/logo.svg"

Saludos.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.

ResponderCitar
Respondido : 14/08/2017 6:31 pm

wpdoctor-revisa-la-salud-de-tu-wordpress

Rodrigo Martín
 Rodrigo Martín
Usuario eminente

Pongo un momento, en modo online la tienda.
Podrías, por favor, indicarme como debería quedar el código.
No logro entender lo que me indicas.
Gracias

ResponderCitar
Respondido : 14/08/2017 6:38 pm
Jhon Marreros Guzman
 Jhon Marreros Guzman
Soporte CMS Webempresa Moderator

Hola

Tal como te indiqué, sólo necesitas cambiar la fuente de la etiqueta img, es decir el atribut src
Sube tu logo .svg dentro de la carpeta img de tu sitio, suponiendo que se llame logo.svg entonces tendrías que usar esta url:

Contenido solo visible a usuarios registrados

Saludos.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.

ResponderCitar
Respondido : 14/08/2017 7:34 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

Rodrigo Martín
 Rodrigo Martín
Usuario eminente

Buenas Jhon,

He subido nuevamente el archivo original header.tpl , y modifiqué la ruta al src, dejando el archivo como te lo muestro a continuación. Y sigue sin mostrar el logo.



También probé a ponerlo así tal cual me lo indicas, src="/img/logo.svg" , también lo puse con la ruta absoluta, poniendo la url , y por último con la ruta completa según lo veo cuando accedo desde filezilla :

src"/public_html/themes/theme1142/img/logo.svg"

De ningún modo se muestra el logo.

Con respecto a la modificación en el global.css , probé usando el archivo original y he probado utilizando el archivo modificado como indica el tutorial. Debería utilizar el original?

ResponderCitar
Respondido : 14/08/2017 8:40 pm
Jhon Marreros Guzman
 Jhon Marreros Guzman
Soporte CMS Webempresa Moderator

Hola

Lo que sucede es que estas usando una ruta relativa a la raiz de tu sitio y sin embargo el logo lo has puesto en los archivos del theme, en todo caso puedes usar esta url como parte del src

Contenido solo visible a usuarios registrados

Usa una url no una ruta con public_html, ya que esta carpeta no existe como url.

Saludos.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.

ResponderCitar
Respondido : 14/08/2017 11:06 pm

Cursos Gratuitos WordPress

Rodrigo Martín
 Rodrigo Martín
Usuario eminente

He dejado el código así, colocando la ruta que me indicaste en src, aún así sigue sin mostrar el logo.
¿Aún hay algo que esté mal o falta algo por poner, o un espacio en algún sitio, algo más que deba hacer???
A ver si por fin logramos hacer que se vea el logo en svg.



ResponderCitar
Respondido : 14/08/2017 11:21 pm
Jhon Marreros Guzman
 Jhon Marreros Guzman
Soporte CMS Webempresa Moderator

Hola

Envía mejor tu archivo header.tpl del theme que usas, puedes subirlo en .zip
Habilita tu web temporalmente para revisar la ruta que se genera.

Saludos.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.

ResponderCitar
Respondido : 15/08/2017 12:07 am

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Rodrigo Martín
 Rodrigo Martín
Usuario eminente

OK, aquí va.
Web habilitada.

ResponderCitar
Respondido : 15/08/2017 12:18 am
Jhon Marreros Guzman
 Jhon Marreros Guzman
Soporte CMS Webempresa Moderator

Hola

Te falta el http://, las urls siempre van con http, en tu caso no la has puesto y has usado directamente www

Coloca la url completa

Saludos.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.

ResponderCitar
Respondido : 15/08/2017 12:40 am

wpdoctor-revisa-la-salud-de-tu-wordpress

Rodrigo Martín
 Rodrigo Martín
Usuario eminente

Gracias Jhon! Por fin!! Ahora si se ve el logo en svg. De manera que si se hace zoom en el navegador, ahora no queda pixelado como ocurría con la imagen jpg o png.

Por último, un par de dudas.
1- Quisiera que el logo se vea un poco más grande de lo que se ve ahora. ¿Debería modificar la medida en el código que agregué en el archivo global.css, o desde donde debería hacerlo?

2- Estuve buscando como comprimir el logo.svg , utilicé un compresor online, pero se redujo muy poco, y el archivo logo.svg continúa pesando demasiado, tiene 1,3 MB. Ahora que está funcionando quisiera reemplazarlo por un archivo que pese muchísimo menos y no dejarlo así para que no ralentice la carga de las páginas.

Gracias otra vez ! Saludos.

ResponderCitar
Respondido : 15/08/2017 1:48 am
Página 1 / 2

Por favor Iniciar Sesión o Registro