SVG significa Scalable Vector Graphics y es un formato de imagen vectorial basado en XML (se puede editar). SVG se usa comúnmente para íconos, animaciones, cuadros interactivos, gráficos y otros gráficos dinámicos en el navegador. Como está basado en XML, puede cambiar fácilmente el tamaño del icono SVG usando Tailwind.
Enfoque: simplemente puede personalizar la clase de SVG cambiando la altura y el ancho de los iconos o cambiando los valores de los atributos viewBox de SVG.
Sintaxis:
<svg class="h-30 w-30" viewBox="0 0 24 24">
<path d=" "/>
</svg>
Nota: El atributo viewBox define la posición y la dimensión de una ventana gráfica SVG. El valor del atributo viewBox es una lista de cuatro números, min-x, min-y, ancho y alto. Entonces viewBox no establece el tamaño del SVG, solo determina el marco o la ventana a través de la cual veremos el SVG.
Ejemplo 1: uso del atributo viewBox para cambiar el tamaño del icono SVG.
HTML
<!DOCTYPE html> <html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center mx-4 space-y-2"> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS Resize SVG icon</b> <div class=" m-4 grid grid-flow-col gap-4 p-5"> <!--- Home Icon ---> <svg xmlns="http://www.w3.org/2000/svg" class="text-red-500" fill="none" viewBox="0 0 80 80" stroke="currentColor" height="100px" width="100px"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" /> </svg> <!--- Emoji Icon ---> <svg xmlns="http://www.w3.org/2000/svg" class="text-yellow-400" fill="none" viewBox="0 0 80 80" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> </svg> </div> </body> </html>
Producción:
Ejemplo 2: simplemente cambiando el ancho y el alto de la clase de un icono.
HTML
<!DOCTYPE html> <html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center mx-4 space-y-2"> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS SVG</b> <div class=" m-4 grid grid-flow-col gap-4 p-5"> <!--- Home Icon ---> <svg xmlns="http://www.w3.org/2000/svg" class=" text-red-500 h-70 w-50" viewBox="0 0 80 80" fill="none" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" /> </svg> <svg xmlns="http://www.w3.org/2000/svg" class="bg-red-400 text-green-300 h-40 w-20 fill-current" viewBox="0 0 80 80" fill="none" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l -3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783 .57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00- .363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1 .81h4.914a1 1 0 00.951-.69l1.519-4.674z" /> </svg> </div> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por aksrathod07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA