Learn SVG

Create scalable vector graphics for your website with our SVG tutorials. From simple icons to complex illustrations, we'll show you how to make your visuals shine.
  1. SVG Viewport y viewBox (para principiantes absolutos)

    SVG Viewport y viewBox (para principiantes absolutos)

    Tutorial Beginner

    En este breve consejo vamos a explicar qué son exactamente viewport y viewBox para SVG.

  2. Cómo crear un corazón palpitante animado con SVG

    Cómo crear un corazón palpitante animado con SVG

    Tutorial Intermediate

    ¡Es el día de San Valentín! así que entremos en ambiente, teniendo pensamientos rosas y emociones cálidas en el proceso, y vamos a codificar un sencillo...

  3. Cómo crear 7 efectos CSS "hover" distintos desde cero

    Cómo crear 7 efectos CSS "hover" distintos desde cero

    Tutorial Beginner

    En el tutorial de hoy, vamos a crear 7 diferentes efectos CSS para el estado "hover" (cuando sitúas el ratón o el dedo sobre un elemento...

  4. Cómo crear una aplicación de tareas pendientes con JavaScript puro (y almacenamiento local)

    Cómo crear una aplicación de tareas pendientes con JavaScript puro (y almacenamiento local)

    Tutorial Advanced

    En este tutorial, mejoraremos nuestras habilidades en el front-end aprendiendo a crear una aplicación de tareas pendientes "hecha a mano". Para crearla no...

  5. Introducción a los filtros SVG

    Introducción a los filtros SVG

    Tutorial Intermediate

    En este tutorial vamos a explorar el mundo de los filtros SVG. Con los filtros SVG puedes crear efectos de texto únicos, efectos de imagen, y con un poco de...

  6. Cree un logotipo SVG animado para el Día Internacional de la Mujer 2019

    Cree un logotipo SVG animado para el Día Internacional de la Mujer 2019

    Tutorial Beginner

    Cree un logotipo SVG animado para el Día Internacional de la Mujer 20193

  7. SVGs accesibles: métodos para añadir contenido alternativo

    SVGs accesibles: métodos para añadir contenido alternativo

    Tutorial Beginner

    Los gráficos vectoriales escalables (SVG) son imágenes vectoriales basadas en XML. Existen desde hace ya mucho tiempo, pero durante los últimos dos años su...

  8. Consejos para trabajar con vectores en Figma

    Consejos para trabajar con vectores en Figma

    Tutorial Beginner

    Los vectores son una parte importante de cualquier aplicación de diseño de interfaz de usuario o de prototipos, y Figma tiene su propio conjunto poderoso y...

  9. Cómo Animar Fácilmente Archivos SVG con SVGator

    Cómo Animar Fácilmente Archivos SVG con SVGator

    Tutorial Beginner

    Animar SVG es una gran alternativa a los GIFs animados. En este tutorial SVG te explicaré cómo hacer un archivo SVG con la herramienta en línea “SVGator”.

  10. Cómo crear imágenes SVG responsivas

    Cómo crear imágenes SVG responsivas

    Tutorial Beginner

    En este tutorial explicaré cómo crear imágenes SVG responsivas; más específicamente, explicaré cómo crear logotipos, iconos e imágenes SVG que cambien...

  11. Cómo Animar una Cinta SVG de Día Mundial de la Salud Mental

    Cómo Animar una Cinta SVG de Día Mundial de la Salud Mental

    Tutorial Intermediate

    El de la Organización Mundial de la salud "Mental Salud día mundial" está aquí, 10 de octubre de 2018, para ayudar a crear conciencia sobre temas de salud...

  12. Nuevo curso: diseño compatible con el código con Adobe XD

    Nuevo curso: diseño compatible con el código con Adobe XD

    Tutorial Beginner

    Crear un gran diseño web es una cosa, pero si no se lo entrega a un desarrollador de la manera correcta, es posible que no se traduzca en código de la manera...