Creación del SVG del gráfico

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

1. viewBox
   Los dos primeros valores indican las coordenadas iniciales del rectángulo en “x” y en "y"
   Los últimos dos valores indican el ancho y la altura del rectángulo en px

<svg viewBox="0 0 300 200">

1. line
   Representa el eje donde va a pasar el 0

• stroke: color de la línea
• stroke-width: ancho de la línea en px
• x1: coordenada inicial de la línea en el eje “x”
• y1: coordenada inicial de la línea en el eje “y”
• x2: coordenada final de la línea en el eje “x”
• y2: coordenada final de la línea en el eje “y”

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"
            />

1. polyline
   UIna secuencia de líneas conectadas (puede ser un polígono cerrado, una circunferencia, etc.)

• fill: indica el relleno del polígono
• stroke: color de la línea
• stroke-width: ancho de la línea en px
• points: recibe una lista de coordenadas “x,y”

<polyline
	fill="none"
	stroke="#0689B0"
	stroke-width="2"
	points="0,0 100,100 200,100 300,200"
 />

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!

<style scoped>
svg {
  width: 100%;
}

p {
  text-align: center;
}
</style>

Estos gráficos son bastante interesantes, me gustaría que tuvieran más contenido.

Espectacular, no conocía esta herramienta de svg para html!

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!!