Creación del SVG del gráfico
Contenido del curso
Creación del SVG del gráfico
Contenido del curso
Miguel Angel Reyes Moreno
Guillermo Castaño Vèlez
Rafael Soriano Ramírez
Ana Shek
Josue Cerron Tuesta
Santiago Gonzalez
Matías Daniel Cravero
Cristian Diaz
Ameth Ordoñez Erazo
Hans González
Jose Morales Varon
Rafael Soriano Ramírez
Diana Martinez
John Jairo Caranton Ruiz
Diana Martinez
Carlos Rodríguez
Rafael Soriano Ramírez
Ricardo Portillo
Julian David Alzate Cuervo
Diana Martinez
Anderson Eduardo Arévalo Ramírez
Juan Guillermo Perez Cardozo
Jahiker Rojas
Felix Torres Javier Antonio
Dejen su like para pedir un curso de creación de SVG
Lástima que en Platzi no se tenga un curso de SVg completo
A mi experiencia ya hay alternativas de librerías que hacen esto, es bueno entender las entrañas, pero no es tan práctico en un desarrollo de cero
<svg viewBox="0 0 300 200">
Este código formará una línea horizontal desde la coordenada (0, 100) hasta la coordenada (300, 100) <line stroke="#c4c4c4" stroke-width="2" x1="0" y1="100" x2="300" y2="100" />
Este código creará una línea vertical desde la coordenada (200, 0) hasta la coordenada (200, 200) <line stroke="#04b500" stroke-width="2" x1="200" y1="0" x2="200" y2="200" />
<polyline fill="none" stroke="#0689B0" stroke-width="2" points="0,0 100,100 200,100 300,200" />
Wow esto vale oro!
Componente Graphic
<template> <div> <svg viewBox="0 0 300 200"> <line stroke="#c4c4c4" stroke-width="2" x1="0" y1="100" x2="300" y2="100"/> <polyline fill="none" stroke="#0689B0" stroke-witdh="2" points="0,0 100,100 200,100 300,200"/> <line stroke="#04b500" stroke-witdh="2" x1="200" y1="0" x2="200" y2="200"/> </svg> <p>Ultimos 30 días</p> </div> </template> <style scoped> svg { width: 100%; } p { text-align: center; } </style>
Muy bueno, no tenía ni idea que se podía graficar sobre html nativo!
Técnicamente no es HTML, es su propia cosa, ya que un svg puede existir fuera del HTML
Detalles técnicos aparte, si, los SVG son una herramienta muy poderosa
<style scoped> svg { width: 100%; } p { text-align: center; } </style>
Gracias brother
Estos gráficos son bastante interesantes, me gustaría que tuvieran más contenido.
En un proyecto profesional ¿Qué alternativas para crear gráficos de éste tipo se tienen compatibles con Vue 3?
Todas las que soporte la web, el team de Vue siempre tiene muy en el core, que Vue extiende las características nativas de HTML, CSS y JS, nunca reinventa esas cosas, y siempre te permite aprovecharlas al 100%. Así que cualquier cosa que puedas usar en las tecnologías vanilla, deberías poder usarlas fácilmente con Vue.
Para este tipo de graficos canvas no seria mejor ?
No necesariamente, este ejemplo solo es didáctico, podrías usar cualquiera de los dos.
Espectacular, no conocía esta herramienta de svg para html!
es un amor conocer esta herramienta, es bueno conocer sus entrañas, aunque en proyectos profesionales ya hay cosas que hacen esto
Los que desean profundizar aquí dejo el Enlace para la documentación del svg
Para estudiar un poco más de SVG
https://www.w3schools.com/graphics/svg_intro.asp
Hola, sin duda el componente del gráfico es el más interesante pero también el más complicado del curso, si sienten que es demasiado para ustedes, no hay ningún problema en saltarse hasta las clases del próximo componente si es necesario.
Recuerden que siempre pueden tomar el código del repositorio del curso si es necesarario.
La profe explica muy bien, no es tan complejo si sabes un poco de manejo de datos.Yo vi mas de 20 materias compuestas por matematica y no hay nada más bonito que ver esto<3
oooo pero que bien, no sabia nada de svg. aqui aprendi como hacer un grafico basico y estatico
Que cool! nunca habia creado un svg! estuvo divertido jajaja 😁
Maravilloso SVG!!
