SVG pasiño a pasiño - Historial de revisiones

Joselv: /* Vantaxes e diferenzas */

2022-10-21T08:14:38Z

Vantaxes e diferenzas

Joselv en 23:47 23 ago 2022

2022-08-23T23:47:09Z

Joselv: /* Referencias */

2022-08-22T03:16:20Z

Referencias

Joselv: /* Referencias */

2022-08-21T03:17:00Z

Referencias

Joselv: /* Vantaxes e diferenzas */

2022-08-21T03:15:41Z

Vantaxes e diferenzas

Joselv: /* Gráficos SVG */

2022-08-21T03:09:08Z

Gráficos SVG

Joselv: /* Gráficos SVG */

2022-08-21T03:01:32Z

Gráficos SVG

Joselv: /* Gráficos SVG */

2022-08-21T03:00:03Z

Gráficos SVG

Joselv: /* Referencias */

2022-08-21T02:51:39Z

Referencias

Joselv: /* Posición do segmento de recta */

2022-08-21T02:46:01Z

Posición do segmento de recta

@@ Línea 45: / Línea 45: @@
 Os ficheiros SVG son os preferidos para deseño gráfico porque calquera pode facilmente ver as dimensións e valores de cada elemento da imaxe.
-Outra vantaxe importante do formato SVG e a súa integración coas ''CSS Media Queries''. Os ''layouts'' desenvoltos como parte dun deseño responsivo adáptanse automáticamente o tammaño da pantalla (''viewport'') via ''CSS Media Queries''. Os gráficos SVG poden ser integrados nos elementos HTMLe controlados via ''media queries'' para que se poidan adaptar ó ancho da fiestra do navegaor.
+Outra vantaxe importante do formato SVG e a súa integración coas ''CSS Media Queries''. Os ''layouts'' desenvoltos como parte dun deseño responsivo adáptanse automáticamente o tamaño da pantalla (''viewport'') via ''CSS Media Queries''. Os gráficos SVG poden ser integrados nos elementos HTMLe controlados via ''media queries'' para que se poidan adaptar ó ancho da fiestra do navegaor.
 === SVG vs Canvas ===

@@ Línea 1: / Línea 1: @@
-[[File:SVG_logo.png|thumb|right|Logo SVG]]
+[[File:SVG_logo.png|thumb|right| Logo SVG]]
 [[File:Other_image_formats_vs_SVG.png|thumb|right| Comparación formatos de imaxe con SVG]]
 = Gráficos SVG =

@@ Línea 625: / Línea 625: @@
 * [https://webdesign.tutsplus.com/es/tutorials/introduction-to-svg-filters--cms-33546 Introducción a filtros]
 * [https://www.lifewire.com/svg-file-4120603 Introdución - lifewire]
 </div>

@@ Línea 624: / Línea 624: @@
 * [https://www.w3.org/TR/filter-effects-1/ Estandar de efectos de filtros]
 * [https://webdesign.tutsplus.com/es/tutorials/introduction-to-svg-filters--cms-33546 Introducción a filtros]
 </div>

@@ Línea 32: / Línea 32: @@
 == Vantaxes e diferenzas ==
 Cal é a diferenza entre SVG, PNG, and JPG?
-;SVG
+; SVG
 : e un formato gráfico baseado en vectores que representa as imaxes como valores matemáticos
 ; JPG
@@ Línea 43: / Línea 44: @@
 Outra vantaxe importante do formato SVG e a súa integración coas ''CSS Media Queries''. Os ''layouts'' desenvoltos como parte dun deseño responsivo adáptanse automáticamente o tammaño da pantalla (''viewport'') via ''CSS Media Queries''. Os gráficos SVG poden ser integrados nos elementos HTMLe controlados via ''media queries'' para que se poidan adaptar ó ancho da fiestra do navegaor.
 = Bordes e recheos de gráficos dentro de SVG =

← Revisión anterior		Revisión del 03:09 21 ago 2022
Línea 30:		Línea 30:

	Os gráficos resultantes son vectoriales polo que '''nunca perden a súa resolución ainda que os agrandemos'''.		Os gráficos resultantes son vectoriales polo que '''nunca perden a súa resolución ainda que os agrandemos'''.
		+
		+	== Vantaxes e diferenzas ==
		+	Cal é a diferenza entre SVG, PNG, and JPG?
		+	;SVG
		+	: e un formato gráfico baseado en vectores que representa as imaxes como valores matemáticos
		+	; JPG
		+	: é u raster ou formato de imaxe bitmap
		+	; PNG
		+	: usa código binario para comprimir os datos da imaxe
		+
		+	Os ficheiros SVG son os preferidos para deseño gráfico porque calquera pode facilmente ver as dimensións e valores de cada elemento da imaxe.
		+
		+	Outra vantaxe importante do formato SVG e a súa integración coas ''CSS Media Queries''. Os ''layouts'' desenvoltos como parte dun deseño responsivo adáptanse automáticamente o tammaño da pantalla (''viewport'') via ''CSS Media Queries''. Os gráficos SVG poden ser integrados nos elementos HTMLe controlados via ''media queries'' para que se poidan adaptar ó ancho da fiestra do navegaor.

	= Bordes e recheos de gráficos dentro de SVG =		= Bordes e recheos de gráficos dentro de SVG =

@@ Línea 7: / Línea 7: @@
 SVG (''Scalable Vector Graphics'') significa gráficos vectoriales escalables. E un estándar de web para descrición de gráficos bidimensionais. A etiqueta <<nowiki />svg> '''permítenos o uso de imaxes en formato SVG'''.
-O formato dos ficheiros SVG está baseado en XML (''Extensible Markup Language''); foi publicado por primeira vez por un grupo de traballo do ''World Wide Web Consortium'' (W3C) no 2001. Pode ser usado para describir obxectos bidimensionáis (gráficos ou animmacións) e pode ser escalado sen perda de calidade. Nos inicios moitos navegadores tiñan problemas amosando contidos SVG pero na actualidade son soportados por todos os navegadores mayoritarios.
+O formato dos ficheiros SVG está '''baseado en XML''' (''Extensible Markup Language''); foi publicado por primeira vez por un grupo de traballo do ''World Wide Web Consortium'' (W3C) no 2001. Pode ser usado para describir obxectos bidimensionáis (gráficos ou animmacións) e pode ser escalado sen perda de calidade. Nos inicios moitos navegadores tiñan problemas amosando contidos SVG pero na actualidade son soportados por todos os navegadores mayoritarios.
 Algúns programas gráficos coma Adobe Illustrator (ou o seu equivalente software libre Inkscape Illustrator) permiten usar este formato, que fai relativamente sinxelo describir un vector gráfico ou animación e mostralo nun navegador.
-Os ficheiros SVG son defindos nunha estrutura de árbore composta por elementos individuais. De xeito similar os ficheiros CSS, os atributos están asignados a estes elementos. SVG está baseado na sintaxe of XML, así que cada ficheiro SVG comeza cun XML e a declaración Doctype. Lembra que XML e unha linguaxe de marcas declarativa usada prncipalmente para representar xerárquicamente datos estruturados nun formato de ficheiro de texto. A principal vantaxe dos ficheiros XML e que poden ser lidos por máquinas e tamén humáns.
+Os '''ficheiros SVG son defindos nunha estrutura de árbore composta por elementos individuais'''. De xeito similar os ficheiros CSS, os '''atributos están asignados a estes elementos'''. SVG está baseado na sintaxe of XML, así que '''cada ficheiro SVG comeza cun XML e a declaración Doctype'''. Lembra que XML e unha linguaxe de marcas declarativa usada prncipalmente para representar xerárquicamente datos estruturados nun formato de ficheiro de texto. A principal vantaxe dos ficheiros XML e que poden ser lidos por máquinas e tamén humáns.
 Para crear imáxenes svg primeiro crearemos a etiqueta <<nowiki />svg> cos seus respectivos atributos coma ''width'' (ancho) e ''height'' (alto).

@@ Línea 577: / Línea 577: @@
 * [https://www.w3schools.com/graphics/svg_examples.asp SVG exemplos en w3schools]
 * [https://desarrolladoresweb.org/html5/svg-en-html5/ SVG en HTML5]
 </div>

@@ Línea 93: / Línea 93: @@
   '''Recordatorio.''' O punto de orixe de coordenadas (0,0) será a esquina superior esquerda do lienzo SVG.
- '''Recordatorio.''' Algunhas propiedades xa coñecidas e que poden ser empregadas:
- stroke: define a color da liña.
+=== Algunhas propiedades ===
- stroke-width: define o ancho da liña.
+Algunhas xa coñecidas e que poden ser empregadas:
- stroke-linecap: estilo de terminación do borde
+* stroke: define a cor da liña.
 === Exemplos ===