Diferencia entre revisiones de «SVG pasiño a pasiño»
(Página creada con « = Bordes e recheos de gráficos dentro de SVG = Todos os gráficos SVG poseún borde e recheo. A apariencia destes dous aspectos poden ser controlados mediante varias prop…») |
|||
| Línea 1: | Línea 1: | ||
| + | |||
| + | = Gráficos SVG = | ||
| + | SVG (''Scalable Vector Graphics'') significa gráficos vectoriales escalables. A etiqueta <<nowiki />svg> permítenos crear imaxes bidimensionais en formato svg. | ||
| + | |||
| + | Para crear imáxenes svg primeiro crearemos a etiqueta <<nowiki />svg> cos seus respectivos atributos coma ''width'' (ancho) e ''height'' (alto). | ||
| + | |||
| + | Creamos un lienzo coas súas dimensións e dentro crearemos os nosos gráficos vectoriais escalables. | ||
| + | |||
| + | <syntaxhighlight lang="html5"> | ||
| + | <svg width="240" height="250">...</svg> | ||
| + | </syntaxhighlight> | ||
| + | |||
| + | Se non se indica ''width'' e ''height'' o valor por defecto será do 100%. | ||
| + | |||
| + | Svg posee un sistema de coordenadas onde o punto da orixen (0,0) será a esquina superior esquerda, a coordenada x aumenta o seu valor hacia a dereita e a coordenada y aumenta o seu valor hacia abaixo. | ||
| + | (0,0) | ||
| + | |||
| + | Dentro de <<nowiki />svg> podemos crear desde simples lineas, figuras xeométricas coma círculos, cadrados, rectángulos, triángulos, polígonos, elipses e traxectorias ata complexas imágenes coma logos. | ||
| + | |||
| + | Además podemos darlle estilo con css e funcionalidades con JavaScript. | ||
| + | |||
| + | Os gráficos resultantes son vectoriales polo que nunca perden a súa resolución ainda que os agrandemos. | ||
| + | |||
| + | Pola extensión que pode acadar esta sección para explicar cómo aprender a crear gráficos en SVG (comezando por simples liñas, rectángulos, círculos, polígonos, elipses e curvas ata figuras híbridas máis complexas), abarcaremos este tema nun artigo separado: [[SVG pasiño a pasiño]] | ||
= Bordes e recheos de gráficos dentro de SVG = | = Bordes e recheos de gráficos dentro de SVG = | ||
| Línea 5: | Línea 29: | ||
Enfocaremos en coñecer as propiedades que nos permitan controlar o borde e fondo. | Enfocaremos en coñecer as propiedades que nos permitan controlar o borde e fondo. | ||
| − | = | + | = Propiedades ''stroke'' SVG = |
| − | As propiedades relacionadas ó borde son: | + | As propiedades [https://www.w3schools.com/graphics/svg_stroking.asp ''stroke''] relacionadas ó borde son: |
* stroke: permite definir a cor. | * stroke: permite definir a cor. | ||
* stroke-width: ancho de borde. | * stroke-width: ancho de borde. | ||
| Línea 13: | Línea 37: | ||
* stroke-opacity: opacidade de borde. | * stroke-opacity: opacidade de borde. | ||
| − | + | == Propiedade ''fill'' SVG == | |
As propiedades relacionadas ó estilo de fondo de figuras SVG son: | As propiedades relacionadas ó estilo de fondo de figuras SVG son: | ||
* fill: cor de fondo. | * fill: cor de fondo. | ||
| Línea 19: | Línea 43: | ||
* fill-rule: cor total ou parcial. | * fill-rule: cor total ou parcial. | ||
| − | + | SVG hten algunos elementos de forma predefinidos que poden ser utilizados polos desarolladores: | |
| + | * Rectangle <rect> | ||
| + | * Circle <circle> | ||
| + | * Ellipse <ellipse> | ||
| + | * Line <line> | ||
| + | * Polyline <polyline> | ||
| + | * Polygon <polygon> | ||
| + | * Path <path> | ||
| + | |||
| + | Explicaremos a continuación cada unha delas. | ||
| + | |||
| + | == LiñaS SVG == | ||
| + | * https://www.w3schools.com/graphics/svg_line.asp | ||
| + | |||
| + | == Poliliñas SVG == | ||
| + | * https://www.w3schools.com/graphics/svg_polyline.asp | ||
| − | == | + | == Rectángulos SVG == |
| + | * https://www.w3schools.com/graphics/svg_rect.asp | ||
| − | == | + | == Polígonos SVG == |
| + | * https://www.w3schools.com/graphics/svg_polygon.asp | ||
| − | == | + | == Círculos SVG == |
| + | * https://www.w3schools.com/graphics/svg_circle.asp | ||
| − | == | + | == Elípses SVG == |
| + | * https://www.w3schools.com/graphics/svg_ellipse.asp | ||
| − | == | + | == Texto SVG == |
| + | * https://www.w3schools.com/graphics/svg_text.asp | ||
| − | = | + | = Animacións SVG, Trazos y Canvas = |
| − | == | + | = Referencias = |
| + | * [https://www.tutorialrepublic.com/html-tutorial/html5-svg.php HTML5 SVG on tutorialrepublic] | ||
| + | * [https://www.w3schools.com/graphics/svg_intro.asp SVG on w3schools] | ||
| + | * [https://www.w3schools.com/graphics/svg_examples.asp SVG exemplos en w3schools] | ||
| + | * [https://desarrolladoresweb.org/html5/svg-en-html5/ SVG en HTML5] | ||
Revisión del 22:24 20 ago 2022
Sumario
Gráficos SVG
SVG (Scalable Vector Graphics) significa gráficos vectoriales escalables. A etiqueta <svg> permítenos crear imaxes bidimensionais en formato svg.
Para crear imáxenes svg primeiro crearemos a etiqueta <svg> cos seus respectivos atributos coma width (ancho) e height (alto).
Creamos un lienzo coas súas dimensións e dentro crearemos os nosos gráficos vectoriais escalables.
<svg width="240" height="250">...</svg>
Se non se indica width e height o valor por defecto será do 100%.
Svg posee un sistema de coordenadas onde o punto da orixen (0,0) será a esquina superior esquerda, a coordenada x aumenta o seu valor hacia a dereita e a coordenada y aumenta o seu valor hacia abaixo. (0,0)
Dentro de <svg> podemos crear desde simples lineas, figuras xeométricas coma círculos, cadrados, rectángulos, triángulos, polígonos, elipses e traxectorias ata complexas imágenes coma logos.
Además podemos darlle estilo con css e funcionalidades con JavaScript.
Os gráficos resultantes son vectoriales polo que nunca perden a súa resolución ainda que os agrandemos.
Pola extensión que pode acadar esta sección para explicar cómo aprender a crear gráficos en SVG (comezando por simples liñas, rectángulos, círculos, polígonos, elipses e curvas ata figuras híbridas máis complexas), abarcaremos este tema nun artigo separado: SVG pasiño a pasiño
Bordes e recheos de gráficos dentro de SVG
Todos os gráficos SVG poseún borde e recheo. A apariencia destes dous aspectos poden ser controlados mediante varias propiedades que evidentemente irán na etiqueta de apertura de cada gráfico.
Enfocaremos en coñecer as propiedades que nos permitan controlar o borde e fondo.
Propiedades stroke SVG
As propiedades stroke relacionadas ó borde son:
- stroke: permite definir a cor.
- stroke-width: ancho de borde.
- stroke-linecap: estilo de terminación de borde.
- stroke-dasharray: estilo de borde discontinua.
- stroke-opacity: opacidade de borde.
Propiedade fill SVG
As propiedades relacionadas ó estilo de fondo de figuras SVG son:
- fill: cor de fondo.
- fill-opacity: opacidade de fondo.
- fill-rule: cor total ou parcial.
SVG hten algunos elementos de forma predefinidos que poden ser utilizados polos desarolladores:
- Rectangle <rect>
- Circle <circle>
- Ellipse <ellipse>
- Line <line>
- Polyline <polyline>
- Polygon <polygon>
- Path <path>
Explicaremos a continuación cada unha delas.
