Cómo convertir mi logo en imagen SVG y CSS para hacer mi sitio más liviano

Hola, tengo una consulta, estoy trabajando en hacer más liviana mi página web y he visto que algunas página en las imágenes estáticas como por ejemplo el Logo, no son imágenes, sino código o un archivo SVG.

Quisiera saber como hacerlo para mi web?

He buscado convertidores de PNG a CSS y funcionan, pero el código es tan grande que pesa más que el PNG.

Por ejemplo, la web de Xataka.com cuando le haces click derecho al logo, no te sale para descargar imagen y cuando inspeccionas el código, te aparece un SVG y varios estilos CSS, quisiera saber si saben como funciona eso.

Gracias!

Tienes que hacerlo en código SVG
Busca tutoriales o contrata a alguien .-.

Lo que debes hacer para obtener un Logo en formato SVG (que es lo que se viene utilizando últimamente por todas las prestaciones que este ofrece como cambiarle el color, tamaño, animaciones, etc mediante css) es vectorizarlo en algun programa "vectorizador". Por ejemplo yo utilizo Illustrator. En el mismo deberás de redibujar el logo para que quede vectorizado y así poderlo guardar como SVG desde el típico "Guardar como" y ya quedaría.

Espero esta info te sea de utilidad. Cualquier consulta quedo a las órdenes.

Saludos!

Si tienes tu logo hecho en vectores el mismi illustrator o photoshop tiene la opcion de guardar y exportar a SVG... ahora que si tu logo es una imagen, pues, como dice el compañero de arriba tendras que contratar a alguien que lo haga a vectores.

Tienes que hacerlo en formato SVG, puedes buscar tutoriales o buscar un diseñador.

Si tu logo es muy sencillo entonces el SVG si es una opción (sino quedaría muy pesado) lo que yo te recomiendo es que primero hagas varias pruebas antes de decidir el método. Estos son los que yo uso:

- probar entre guardar tu imagen en PNG y JPG (algunas imágenes por su estructura pesan menos en cada uno de estos formatos)
- comprimir el logo con tinypng (tanto el PNG como el jpg) así queda mucho más pequeño y no se logra ver a ojo humano la diferencia.

- si el logo es pequeño (comprimido menos de 10kb) significa que tu página se va a tardar más en hacer la conexión con el servidor (y bloqueando otros recursos) que descargando la imágen. Para esos casos yo decido usar base64 (es una forma de convertir archivos binarios como las imágenes a texto) y fácilmente la puedes poner en HTML como si fuera una imagen normal. Esto lo que hace es que va cargar la imagen junto con el HTML y no va a hacer una petición adicional al servidor.

Gracias por sus respuestas, ya logré solucionarlo!