SVG significa Gráfico vectorial escalable. Se puede usar para hacer gráficos y animaciones como en el lienzo HTML. Es un tipo de gráfico vectorial que se puede ampliar o reducir. Los elementos son lo principal que se requiere para trabajar con SVG.
Lista de elementos SVG:
- SVG <a> Elemento
- SVG <animado> Elemento
- Elemento de SVG <animar movimiento>
- SVG <animarTransformar> Elemento
- SVG <círculo> Elemento
- SVG <clipPath> Elemento
- SVG <defs> Elemento
- SVG <desc> elemento
- SVG <Elipse> Elemento
- SVG <feBlend> Elemento
- SVG <feComponentTransfer> elemento
- SVG <feConvolveMatrix> Elemento
- SVG <feDiffuseLighting> Elemento
- SVG <feDisplacementMap> Elemento
- SVG <feDropShadow> Elemento
- SVG <feInundación> Elemento
- SVG <feGaussianBlur> Elemento
- SVG <feImage> Elemento
- SVG <feMerge> Elemento
- Elemento SVG <feMergeNode>
- SVG <feOffset> Elemento
- Etiqueta SVG<fePointLight>
- SVG <feSpecularLighting> Elemento
- SVG <feSpotLight> Elemento
- Elemento SVG<feTile>
- SVG <feTurbulencia> Elemento
- SVG <filtro> Elemento
- Elemento de SVG <foreignObject>
- SVG <g> elemento
- SVG <escotilla> Elemento
- SVG <imagen> Elemento
- SVG <Línea> Elemento
- SVG <marcador> elemento
- SVG <máscara> Elemento
- SVG <mpath> elemento
- SVG <camino> Elemento
- SVG <patrón> Elemento
- SVG <polígono> Elemento
- SVG <polilínea> Elemento
- SVG <rect> Elemento
- SVG <guión> Elemento
- SVG <conjunto> Elemento
- SVG <detener> Elemento
- SVG <estilo> Elemento
- SVG <cambiar> Elemento
- SVG <símbolo> Elemento
- SVG <texto> Elemento
- SVG <ruta de texto> Elemento
- SVG <título> Elemento
- SVG <tspan> elemento
- SVG <uso> Elemento
- SVG <ver> Elemento
El siguiente ejemplo le dará una breve idea de cómo usar el elemento SVG:
Ejemplo: en este ejemplo, agregaremos una imagen y crearemos un polígono.
HTML
<!DOCTYPE html> <html> <body> <center> <h1 style="color:green;"> GeeksforGeeks </h1> <b>SVG Elements Image and Polygon</b> <center> <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <image href= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" height="150" width="150"/> </svg> <svg width="200px" height="200px"> <!-- try different pairs and make different shapes--> <polygon points="100, 100 15, 205 150, 7 20, 0" fill="green" stroke="yellow"/> </svg> </center> </body> </html>
Producción:
Elemento SVG
Publicación traducida automáticamente
Artículo escrito por GeeksforGeeks-1 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA