<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 640 512"
  height="100"
  width="100"
  x="50"
  y="50"
  preserveAspectRatio="xMidYMid meet"
  fill="#3498db"
  stroke="#2c3e50"
  stroke-width="4"
  opacity="0.8"
  class="mi-estilo"
  id="mi-svg"
  style="background-color: lightgray;">
<!-- fa-discord -->  <path d="M524.5 69.8a1.5 1.5 0 0 0 -.8-.7A485.1 485.1 0 0 0 404.1 32a1.8 1.8 0 0 0 -1.9 .9 337.5 337.5 0 0 0 -14.9 30.6 447.8 447.8 0 0 0 -134.4 0 309.5 309.5 0 0 0 -15.1-30.6 1.9 1.9 0 0 0 -1.9-.9A483.7 483.7 0 0 0 116.1 69.1a1.7 1.7 0 0 0 -.8 .7C39.1 183.7 18.2 294.7 28.4 404.4a2 2 0 0 0 .8 1.4A487.7 487.7 0 0 0 176 479.9a1.9 1.9 0 0 0 2.1-.7A348.2 348.2 0 0 0 208.1 430.4a1.9 1.9 0 0 0 -1-2.6 321.2 321.2 0 0 1 -45.9-21.9 1.9 1.9 0 0 1 -.2-3.1c3.1-2.3 6.2-4.7 9.1-7.1a1.8 1.8 0 0 1 1.9-.3c96.2 43.9 200.4 43.9 295.5 0a1.8 1.8 0 0 1 1.9 .2c2.9 2.4 6 4.9 9.1 7.2a1.9 1.9 0 0 1 -.2 3.1 301.4 301.4 0 0 1 -45.9 21.8 1.9 1.9 0 0 0 -1 2.6 391.1 391.1 0 0 0 30 48.8 1.9 1.9 0 0 0 2.1 .7A486 486 0 0 0 610.7 405.7a1.9 1.9 0 0 0 .8-1.4C623.7 277.6 590.9 167.5 524.5 69.8zM222.5 337.6c-29 0-52.8-26.6-52.8-59.2S193.1 219.1 222.5 219.1c29.7 0 53.3 26.8 52.8 59.2C275.3 311 251.9 337.6 222.5 337.6zm195.4 0c-29 0-52.8-26.6-52.8-59.2S388.4 219.1 417.9 219.1c29.7 0 53.3 26.8 52.8 59.2C470.7 311 447.5 337.6 417.9 337.6z"/></svg>

Atributos Comunes de SVG

  1. x y y:

    • Propósito: Define las coordenadas x e y del elemento SVG en su contenedor.

    • Ejemplo: <svg x="10" y="10" ...>

  2. preserveAspectRatio:

    • Propósito: Controla cómo se escala el contenido del SVG para encajar en el contenedor de visualización.

    • Ejemplo: <svg preserveAspectRatio="xMidYMid meet" ...>

  3. fill:

    • Propósito: Define el color de relleno de las figuras dentro del SVG.

    • Ejemplo: <svg fill="#ff0000" ...> (Esto hará que el SVG se rellene de color rojo)

  4. stroke:

    • Propósito: Define el color de trazo (borde) de las figuras dentro del SVG.

    • Ejemplo: <svg stroke="#000000" ...> (Esto hará que el borde del SVG sea negro)

  5. stroke-width:

    • Propósito: Define el ancho del trazo de las figuras dentro del SVG.

    • Ejemplo: <svg stroke-width="2" ...>

  6. opacity:

    • Propósito: Define la opacidad del SVG, donde 0 es completamente transparente y 1 es completamente opaco.

    • Ejemplo: <svg opacity="0.5" ...>

  7. class:

    • Propósito: Asigna una o más clases CSS al SVG para aplicar estilos.

    • Ejemplo: <svg class="mi-estilo" ...>

  8. id:

    • Propósito: Asigna un identificador único al SVG para aplicarle estilos o seleccionarlo con JavaScript.

    • Ejemplo: <svg id="mi-svg" ...>

  9. style:

    • Propósito: Aplica estilos CSS en línea directamente al SVG.

    • Ejemplo: <svg style="background-color: lightgray;" ...>

----