From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- files/es/web/svg/attribute/index.html | 467 +++++++++++++++++++++ files/es/web/svg/attribute/stop-color/index.html | 59 +++ files/es/web/svg/attribute/transform/index.html | 144 +++++++ files/es/web/svg/element/a/index.html | 145 +++++++ files/es/web/svg/element/animate/index.html | 109 +++++ files/es/web/svg/element/circle/index.html | 116 +++++ files/es/web/svg/element/foreignobject/index.html | 133 ++++++ files/es/web/svg/element/g/index.html | 110 +++++ files/es/web/svg/element/glifo/index.html | 114 +++++ files/es/web/svg/element/index.html | 297 +++++++++++++ files/es/web/svg/element/rect/index.html | 141 +++++++ files/es/web/svg/element/style/index.html | 112 +++++ files/es/web/svg/element/svg/index.html | 110 +++++ files/es/web/svg/element/text/index.html | 152 +++++++ files/es/web/svg/element/use/index.html | 154 +++++++ files/es/web/svg/index.html | 110 +++++ files/es/web/svg/index/index.html | 6 + files/es/web/svg/svg_en_firefox_1.5/index.html | 60 +++ .../es/web/svg/tutorial/getting_started/index.html | 96 +++++ files/es/web/svg/tutorial/index.html | 57 +++ .../svg/tutorial/introducci\303\263n/index.html" | 45 ++ .../tutorial/svg_in_html_introduction/index.html | 95 +++++ files/es/web/svg/tutorial/tools_for_svg/index.html | 74 ++++ 23 files changed, 2906 insertions(+) create mode 100644 files/es/web/svg/attribute/index.html create mode 100644 files/es/web/svg/attribute/stop-color/index.html create mode 100644 files/es/web/svg/attribute/transform/index.html create mode 100644 files/es/web/svg/element/a/index.html create mode 100644 files/es/web/svg/element/animate/index.html create mode 100644 files/es/web/svg/element/circle/index.html create mode 100644 files/es/web/svg/element/foreignobject/index.html create mode 100644 files/es/web/svg/element/g/index.html create mode 100644 files/es/web/svg/element/glifo/index.html create mode 100644 files/es/web/svg/element/index.html create mode 100644 files/es/web/svg/element/rect/index.html create mode 100644 files/es/web/svg/element/style/index.html create mode 100644 files/es/web/svg/element/svg/index.html create mode 100644 files/es/web/svg/element/text/index.html create mode 100644 files/es/web/svg/element/use/index.html create mode 100644 files/es/web/svg/index.html create mode 100644 files/es/web/svg/index/index.html create mode 100644 files/es/web/svg/svg_en_firefox_1.5/index.html create mode 100644 files/es/web/svg/tutorial/getting_started/index.html create mode 100644 files/es/web/svg/tutorial/index.html create mode 100644 "files/es/web/svg/tutorial/introducci\303\263n/index.html" create mode 100644 files/es/web/svg/tutorial/svg_in_html_introduction/index.html create mode 100644 files/es/web/svg/tutorial/tools_for_svg/index.html (limited to 'files/es/web/svg') diff --git a/files/es/web/svg/attribute/index.html b/files/es/web/svg/attribute/index.html new file mode 100644 index 0000000000..2c8897445b --- /dev/null +++ b/files/es/web/svg/attribute/index.html @@ -0,0 +1,467 @@ +--- +title: Referencia atributos SVG +slug: Web/SVG/Attribute +tags: + - Atributo SVG + - Dibujo + - Gráficos vectoriales + - SVG +translation_of: Web/SVG/Attribute +--- +
{{SVGRef}}
+ +

Los elementos SVG pueden ser modificados usando atributos, especificando cómo debe ser manejado o renderizado el elemento A continuación se muestra una lista de todos los atributos disponibles en SVG con sus respectivos enlaces a la documentación de referencia para ayudarte a comprender qué elementos los soportan y cómo funcionan

+ +

Atributos SVG de la A a la Z

+ +
+

A

+ + + +

B

+ + + +

C

+ + + +

D

+ + + +

E

+ + + +

F

+ + + +

G

+ + + +

H

+ + + +

I

+ + + +

K

+ + + +

L

+ + + +

M

+ + + +

N

+ + + +

O

+ + + +

P

+ + + +

R

+ + + +

S

+ + + +

T

+ + + +

U

+ + + +

V

+ + + +

W

+ + + +

X

+ + + +

Y

+ + + +

Z

+ + +
+ +

Categorías

+ +

Atributos de eventos de animación

+ +

{{ SVGAttr("onbegin") }}, {{ SVGAttr("onend") }}, {{ SVGAttr("onload") }}, {{ SVGAttr("onrepeat") }}

+ +

Atributos de objetivo de animación

+ +

{{ SVGAttr("attributeType") }}, {{ SVGAttr("attributeName") }}

+ +

Atributos temporales de animación

+ +

{{ SVGAttr("begin") }}, {{ SVGAttr("dur") }}, {{ SVGAttr("end") }}, {{ SVGAttr("min") }}, {{ SVGAttr("max") }}, {{ SVGAttr("restart") }}, {{ SVGAttr("repeatCount") }}, {{ SVGAttr("repeatDur") }}, {{ SVGAttr("fill") }}

+ +

Atributos de valores de animación

+ +

{{ SVGAttr("calcMode") }}, {{ SVGAttr("values") }}, {{ SVGAttr("keyTimes") }}, {{ SVGAttr("keySplines") }}, {{ SVGAttr("from") }}, {{ SVGAttr("to") }}, {{ SVGAttr("by") }}, {{ SVGAttr("autoReverse") }}, {{ SVGAttr("accelerate") }}, {{ SVGAttr("decelerate") }}

+ +

Atributos de adición de animación

+ +

{{ SVGAttr("additive") }}, {{ SVGAttr("accumulate") }}

+ +

Atributos de procesado condicional

+ +

{{ SVGAttr("requiredExtensions") }}, {{ SVGAttr("requiredFeatures") }}, {{ SVGAttr("systemLanguage") }}.

+ +

Atributos principales

+ +

{{ SVGAttr("id") }}, {{ SVGAttr("xml:base") }}, {{ SVGAttr("xml:lang") }}, {{ SVGAttr("xml:space") }}, {{ SVGAttr("tabindex") }}

+ +

Atributos de eventos del documento

+ +

{{ SVGAttr("onabort") }}, {{ SVGAttr("onerror") }}, {{ SVGAttr("onresize") }}, {{ SVGAttr("onscroll") }}, {{ SVGAttr("onunload") }}

+ +

Atributos de filtro de primitivas

+ +

{{ SVGAttr("height") }}, {{ SVGAttr("result") }}, {{ SVGAttr("width") }}, {{ SVGAttr("x") }}, {{ SVGAttr("y") }}

+ +

Atributos de eventos gráficos

+ +

{{ SVGAttr("onactivate") }}, {{ SVGAttr("onclick") }}, {{ SVGAttr("onfocusin") }}, {{ SVGAttr("onfocusout") }}, {{ SVGAttr("onload") }}, {{ SVGAttr("onmousedown") }}, {{ SVGAttr("onmousemove") }}, {{ SVGAttr("onmouseout") }}, {{ SVGAttr("onmouseover") }}, {{ SVGAttr("onmouseup") }}

+ +

Atributos presentacionales

+ +
Nota: todos los atributos presentacionales de SVG pueden ser usados como propiedades CSS.
+ +

{{ SVGAttr("alignment-baseline") }}, {{ SVGAttr("baseline-shift") }}, {{ SVGAttr("clip") }}, {{ SVGAttr("clip-path") }}, {{ SVGAttr("clip-rule") }}, {{ SVGAttr("color") }}, {{ SVGAttr("color-interpolation") }}, {{ SVGAttr("color-interpolation-filters") }}, {{ SVGAttr("color-profile") }}, {{ SVGAttr("color-rendering") }}, {{ SVGAttr("cursor") }}, {{ SVGAttr("direction") }}, {{ SVGAttr("display") }}, {{ SVGAttr("dominant-baseline") }}, {{ SVGAttr("enable-background") }}, {{ SVGAttr("fill") }}, {{ SVGAttr("fill-opacity") }}, {{ SVGAttr("fill-rule") }}, {{ SVGAttr("filter") }}, {{ SVGAttr("flood-color") }}, {{ SVGAttr("flood-opacity") }}, {{ SVGAttr("font-family") }}, {{ SVGAttr("font-size") }}, {{ SVGAttr("font-size-adjust") }}, {{ SVGAttr("font-stretch") }}, {{ SVGAttr("font-style") }}, {{ SVGAttr("font-variant") }}, {{ SVGAttr("font-weight") }}, {{ SVGAttr("glyph-orientation-horizontal") }}, {{ SVGAttr("glyph-orientation-vertical") }}, {{ SVGAttr("image-rendering") }}, {{ SVGAttr("kerning") }}, {{ SVGAttr("letter-spacing") }}, {{ SVGAttr("lighting-color") }}, {{ SVGAttr("marker-end") }}, {{ SVGAttr("marker-mid") }}, {{ SVGAttr("marker-start") }}, {{ SVGAttr("mask") }}, {{ SVGAttr("opacity") }}, {{ SVGAttr("overflow") }}, {{ SVGAttr("pointer-events") }}, {{ SVGAttr("shape-rendering") }}, {{ SVGAttr("stop-color") }}, {{ SVGAttr("stop-opacity") }}, {{ SVGAttr("stroke") }}, {{ SVGAttr("stroke-dasharray") }}, {{ SVGAttr("stroke-dashoffset") }}, {{ SVGAttr("stroke-linecap") }}, {{ SVGAttr("stroke-linejoin") }}, {{ SVGAttr("stroke-miterlimit") }}, {{ SVGAttr("stroke-opacity") }}, {{ SVGAttr("stroke-width") }}, {{ SVGAttr("text-anchor") }}, {{ SVGAttr("text-decoration") }}, {{ SVGAttr("text-rendering") }}, {{ SVGAttr("unicode-bidi") }}, {{ SVGAttr("visibility") }}, {{ SVGAttr("word-spacing") }}, {{ SVGAttr("writing-mode") }}

+ +

Atributos de estilo

+ +

{{ SVGAttr("class") }}, {{ SVGAttr("style") }}

+ +

Atributos de transferencia de funcionalidades

+ +

{{ SVGAttr("type") }}, {{ SVGAttr("tableValues") }}, {{ SVGAttr("slope") }}, {{ SVGAttr("intercept") }}, {{ SVGAttr("amplitude") }}, {{ SVGAttr("exponent") }}, {{ SVGAttr("offset") }}

+ + + +

{{ SVGAttr("xlink:href") }}, {{ SVGAttr("xlink:type") }}, {{ SVGAttr("xlink:role") }}, {{ SVGAttr("xlink:arcrole") }}, {{ SVGAttr("xlink:title") }}, {{ SVGAttr("xlink:show") }}, {{ SVGAttr("xlink:actuate") }}

diff --git a/files/es/web/svg/attribute/stop-color/index.html b/files/es/web/svg/attribute/stop-color/index.html new file mode 100644 index 0000000000..54bfb8000b --- /dev/null +++ b/files/es/web/svg/attribute/stop-color/index.html @@ -0,0 +1,59 @@ +--- +title: stop-color +slug: Web/SVG/Attribute/stop-color +tags: + - Atributos SVG +translation_of: Web/SVG/Attribute/stop-color +--- +

« SVG Attribute reference home

+ +

El atributo stop-color indica que color usar en el stop del gradiente. La keyword currentColor y ICC  pueden ser especificadas de la misma manera con la especificación <paint> para los atributos {{ SVGAttr("fill") }} y {{ SVGAttr("stroke") }}.

+ +

Usage context

+ + + + + + + + + + + + + + + + + + + + + + + + +
CategoríasPresentation attribute
ValorcurrentColor | <color> | <icccolor> | inherit
Valor inicialnegro
AnimatableSí
Documento normativoSVG 1.1 (2.ª edición)
+ +

Ejemplos

+ +

Elementos

+ +

El siguiente elemento puede usar el atributo stop-color

+ + + +

Compatibilidad entre navegadores

+ + + +

{{Compat("svg.attributes.presentation.stop-color")}}

+ +

Ver también

+ + diff --git a/files/es/web/svg/attribute/transform/index.html b/files/es/web/svg/attribute/transform/index.html new file mode 100644 index 0000000000..0d225d06b8 --- /dev/null +++ b/files/es/web/svg/attribute/transform/index.html @@ -0,0 +1,144 @@ +--- +title: transform +slug: Web/SVG/Attribute/transform +translation_of: Web/SVG/Attribute/transform +--- +

« Indice de atributos SVG

+ +

El atributo transform exhibe una lista de definiciones de transformación que se aplican a un elemento y a sus hijos. Los elementos en la lista de tranformación están separados por espacios en blanco y/o comas y se aplican de derecha a izquierda.

+ +

Contexto de uso

+ + + + + + + + + + + + + + + + + + + + +
CategoriasNone
Valor<transform-list>
AnimableYes
Documento normativoSVG 1.1 (2nd Edition)
+ +

Tipos de definiciones de transformación

+ +
+
matrix(<a> <b> <c> <d> <e> <f>)
+
Esta definición de tranformación, especifica una transformación en forma de una matriz de transformación de seis valores. matrix(a,b,c,d,e,f) es equivalente a aplicar la siguiente matriz de transformación:(acebdf001)\begin{pmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{pmatrix} que mapea las coordinadas desde un nuevo sistema de coordenadas a un sistema existente mediante la siguiente matriz de igualdades:(xprevCoordSysyprevCoordSys1)=(acebdf001)(xnewCoordSysynewCoordSys1)=(axnewCoordSys+cynewCoordSys+ebxnewCoordSys+dynewCoordSys+f1) \begin{pmatrix} x_{\mathrm{prevCoordSys}} \\ y_{\mathrm{prevCoordSys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{pmatrix} \begin{pmatrix} x_{\mathrm{newCoordSys}} \\ y_{\mathrm{newCoordSys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a x_{\mathrm{newCoordSys}} + c y_{\mathrm{newCoordSys}} + e \\ b x_{\mathrm{newCoordSys}} + d y_{\mathrm{newCoordSys}} + f \\ 1 \end{pmatrix}
+
translate(<x> [<y>])
+
Esta definición de transformación, especifica la transición en x e y. Es equivalente a: matrix(1 0 0 1 x y). Si no se provee ningun valor de  y , éste se asume como cero.
+
scale(<x> [<y>])
+
Esta definición de transformación, especifica la escala de operación en x e y. Es equivalente a: matrix(x 0 0 y 0 0). Si no se provee ningun valor de  y , éste se asume igual a x.
+
rotate(<a> [<x> <y>])
+
Esta definición de transformación, especifica la rotación en a grados a partir del punto dado. Si los parámetros opcionales  x e y no se proveen, la rotación se produce en el origen del actual sistema de coordenadas del usuario. Esta operación se corresponde con la matriz:(cosa-sina0sinacosa0001)\begin{pmatrix} \cos a & -\sin a & 0 \\ \sin a & \cos a & 0 \\ 0 & 0 & 1 \end{pmatrix} Si se proveen los parámetros opcionales x e y , la rotación se produce en el punto provisto (x, y). La operación representa el equivalente a la siguiente lista de transformaciones: translate(<x>, <y>) rotate(<a>) translate(-<x>, -<y>).
+
skewX(<a>)
+
This transform definition specifies a skew transformation along the x axis by a degrees. The operation corresponds to the matrix (1tan(a)0010001)\begin{pmatrix} 1 & \tan(a) & 0 \\ 0 & 1 & 0 \\ 0 & 0 & 1 \end{pmatrix}
+
 
+
skewY(<a>)
+
This transform definition specifies a skew transformation along the y axis by a degrees. The operation corresponds to the matrix (100tan(a)10001) \begin{pmatrix} 1 & 0 & 0 \\ \tan(a) & 1 & 0 \\ 0 & 0 & 1 \end{pmatrix}
+
+ +

Example

+ +

Rotating and Translating an SVG element

+ +

In this simple example we rotate and translate (move) an SVG element using transform SVG attribute. The original element before transform is shown with a low opacity.

+ +

CSS (optional):

+ +
text {
+  font: 1em sans-serif;
+}
+ +

SVG:

+ +
<svg width="180" height="200"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink">
+
+  <!-- This is the element before translation and rotation are applied -->
+  <rect x="50" y="50" height="100" width="100" style="stroke:#000; fill: #0086B2" fill-opacity=0.2 stroke-opacity=0.2></rect>
+
+  <!-- Now we add a text element and apply rotate and translate to both -->
+  <rect x="50" y="50" height="100" width="100" style="stroke:#000; fill: #0086B2" transform="translate(30) rotate(45 50 50)"></rect>
+  <text x="60" y="105" transform="translate(30) rotate(45 50 50)"> Hello Moz! </text>
+
+</svg>
+
+ +

{{EmbedLiveSample("Rotating_and_Translating_an_SVG_element",200,200,"/files/5217/rotate_and_translate_svg.png.png")}}

+ +

General Transformation

+ +

Here is a basic example to understand a general transformation. We consider the transform matrix(1,2,3,4,5,6) and draw a thick blue line from (10,20) to (30,40) in the new coordinate system. A thin white line with the same end points is drawn above it using the original coordinate system.

+ +
<svg width="160" height="230" xmlns="http://www.w3.org/2000/svg">
+
+  <g transform="matrix(1,2,3,4,5,6)">
+    <!-- New coordinate system (thick blue line)
+         x1 = 10 | x2 = 30
+         y1 = 20 | y2 = 40
+      -->
+    <line x1="10" y1="20" x2="30" y2="40" style="stroke-width: 10px; stroke: blue;"/>
+  </g>
+
+  <!-- Previous coordinate system (thin white line)
+       x1 = 1 * 10 + 3 * 20 + 5 = 75  | x2 = 1 * 30 + 3 * 40 + 5 = 155
+       y1 = 2 * 10 + 4 * 20 + 6 = 106 | y2 = 2 * 30 + 4 * 40 + 6 = 226
+    -->
+  <line x1="75" y1="106" x2="155" y2="226" style="stroke-width: 1px; stroke: white;"/>
+
+</svg>
+
+ +

{{ EmbedLiveSample('General_Transformation','200px','250px') }}

+ +

Illustration of Text at the Same Position Rotated Around Different Points

+ +

All text examples in the SVG below have the same positioning on the page (x="200" y="0"), and all are rotated at 45°. The only difference is the point that anchors the rotation.

+ +
<svg viewBox="-20 -20 820 420" xmlns="http://www.w3.org/2000/svg" width="800" height="400">
+
+  <text x="200" y="0">...unrotated text; same starting position as examples below (in all cases: x="200" y="0")</text>
+
+  <circle cx="200" cy="0" r="2" style="stroke: green; stroke-width: 1; fill: green;" />
+  <text x="200" y="0" transform="rotate(45 200,0)" style="fill: green;" >...(1) rotate(45 200,0) (rotated 45° around a point at 200,0)</text>
+
+  <circle cx="100" cy="0" r="2" style="stroke: blue; stroke-width: 1; fill: blue;" />
+  <path d="M 200,0 A 100,100 0 0,1 0,0" style="stroke: blue; stroke-width: 1; fill: transparent;" />
+  <text x="200" y="0" transform="rotate(45 100,0)" style="fill: blue;">...(2) rotate(45 100,0) (rotated 45° around a point at 100,0)</text>
+
+  <circle cx="0" cy="0" r="2" style="stroke: red; stroke-width: 1; fill: red;" />
+  <path d="M 200,0 A 200,200 0 0,1 0,200" style="stroke: red; stroke-width: 1; fill: transparent;" />
+  <text x="200" y="0" transform="rotate(45 0,0)" style="fill: red;" >...(3) rotate(45 0,0) (rotated 45° around a point at 0,0)</text>
+
+</svg>
+
+ +

{{EmbedLiveSample("Illustration_of_Text_at_the_Same_Position_Rotated_Around_Different_Points", 800, 400)}}

+ +

Elements

+ +

The following elements can use the transform attribute:

+ + diff --git a/files/es/web/svg/element/a/index.html b/files/es/web/svg/element/a/index.html new file mode 100644 index 0000000000..2377b690f7 --- /dev/null +++ b/files/es/web/svg/element/a/index.html @@ -0,0 +1,145 @@ +--- +title: +slug: Web/SVG/Element/a +translation_of: Web/SVG/Element/a +--- +
{{SVGRef}}
+ +

El elemento SVG <a> crea un hipervínculo a otras páginas web, archivos, ubicaciones dentro de la misma página, direcciones de correo electrónico o cualquier otra URL.

+ +

En SVG, el elemento <a> es un contenedor, es decir, puede crear un enlace alrededor del texto, como en HTML, pero también puede crear un enlace alrededor de cualquier forma.

+ +
+ + +
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <!-- Un vínculo alrededor de una forma -->
+  <a href="https://developer.mozilla.org/docs/Web/SVG/Element/circle">
+    <circle cx="50" cy="40" r="35"/>
+  </a>
+
+  <!-- Un vínculo alrededor de una forma -->
+  <a href="https://developer.mozilla.org/docs/Web/SVG/Element/circle">
+    <text x="50" y="90" text-anchor="middle">
+      &lt;circle&gt;
+    </text>
+  </a>
+</svg>
+ +
/* Como SVG no proporciona un estilo visual predeterminado para los enlaces,
+   se considera una práctica recomendada agregar algunos */
+
+@namespace svgns url(http://www.w3.org/2000/svg);
+
+svgns|a {
+  cursor: pointer;
+}
+
+svgns|a text {
+  fill: blue; /* Incluso para el texto, SVG usa fill para el color */
+  text-decoration: underline;
+}
+
+svgns|a:hover, svgns|a:active {
+  outline: dotted 1px blue;
+}
+ +

{{EmbedLiveSample('Exemple', 100, 100)}}

+
+ +
+

Puesto que este elemento comparte su nombre de etiqueta con el elemento <a>de HTML, la selección de "a" con CSS o querySelector puede aplicarse al tipo incorrecto de elemento. Pruebe la regla @namespace para distinguir entre los dos.

+
+ +

Atributos

+ +
+
{{htmlattrxref("download", "a")}} {{experimental_inline}}
+
Este atributo indica a los navegadores que descarguen un {{Glossary ( "URL ")}} en lugar de desplazarse a él, por lo que se le pedirá al usuario que lo guarde como un archivo local.
+ Value type: <string> ; Default value: none; Animatable: no
+
{{SVGAttr("href")}}
+
Este atributo contiene el {{Glossary ( "URL ")}} o el fragmento de URL al que apunta el hipervínculo.
+ Value type: <URL> ; Default value: none; Animatable: yes
+
{{htmlattrxref("hreflang", "a")}}
+
This attribute contains the URL or URL fragment that the hyperlink points to.
+ Value type: <string> ; Default value: none; Animatable: yes
+
{{htmlattrxref("ping", "a")}} {{experimental_inline}}
+
Este atributo contiene una lista de direcciones URL separadas por espacios a las que, cuando se sigue el hipervínculo, las solicitudes POST con el cuerpo PING serán enviadas por el navegador (en segundo plano). Normalmente se utiliza para el seguimiento. Para obtener una característica más ampliamente admitida que aborde los mismos casos de uso, consulte Navigator.sendBeacon().
+ Value type: <list-of-URLs> ; Default value: none; Animatable: no
+
{{htmlattrxref("referrerpolicy", "a")}} {{experimental_inline}}
+
Este atributo indica qué referrer se enviará al obtener {{Glossary("URL")}}.
+ Value type: no-referrer|no-referrer-when-downgrade|same-origin|origin|strict-origin|origin-when-cross-origin|strict-origin-when-cross-origin|unsafe-url ; Default value: none; Animatable: no
+
{{htmlattrxref("rel", "a")}} {{experimental_inline}}
+
Este atributo especifica la relación del objeto de destino con el vínculado.
+ Value type: <list-of-Link-Types> ; Default value: none; Animatable: yes
+
{{SVGAttr("target")}}
+
Este atributo especifica dónde mostrar el {{Glossary("URL")}}.
+ Value type: _self|_parent|_top|_blank|<name> ; Default value: _self; Animatable: yes
+
{{htmlattrxref("type", "a")}}
+
Este atributo especifica el tipo de medio en forma de un {{Glossary ( "tipo MIME ")}} para la dirección URL vinculada.
+ Value type: <string> ; Default value: none; Animatable: yes
+
{{SVGAttr("xlink:href")}} {{deprecated_inline("SVG2")}}
+
Este atributo contiene la dirección URL o el fragmento de URL al que apunta el hipervínculo.
+ Value type: <URL> ; Default value: none; Animatable: yes
+
+ +

Atributos globales

+ +
+
Atributos principales 
+
Especialmente: {{SVGAttr('id')}}, {{SVGAttr('lang')}}, {{SVGAttr('tabindex')}}
+
Atributos de estilo
+
{{SVGAttr('class')}}, {{SVGAttr('style')}}
+
Atributos de procesamiento condicional
+
Especialmente: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}
+
Atributos de evento
+
Atributos de eventos globales, atributos de eventos de elementos de documento, atributos de eventos gráficos
+
Atributos de presentación
+
Especialmente: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}
+
Atributos XLink
+
Most notably: {{SVGAttr("xlink:title")}}
+
Atributos ARIA
+
aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role
+
+ +

Notas de uso

+ +

{{svginfo}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentatio
{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}{{Spec2('Referrer Policy')}}Añadido el atributo referrerpolicy.
{{SpecName("SVG2", "linking.html#Links", "<a>")}}{{Spec2("SVG2")}}Se sustituye el atributo {{SVGAttr("xlink:href")}} por {{SVGAttr("href")}}
{{SpecName("SVG1.1", "linking.html#Links", "<a>")}}{{Spec2("SVG1.1")}}Definición inicial
+ +

Compatibilidad del navegador

+ + + +

{{Compat("svg.elements.a")}}

diff --git a/files/es/web/svg/element/animate/index.html b/files/es/web/svg/element/animate/index.html new file mode 100644 index 0000000000..962a535446 --- /dev/null +++ b/files/es/web/svg/element/animate/index.html @@ -0,0 +1,109 @@ +--- +title: +slug: Web/SVG/Element/animate +translation_of: Web/SVG/Element/animate +--- +
{{SVGRef}}
+ +
El elemento animate de SVG se utiliza para animar un atributo o propiedad a través del tiempo. Normalmente se inserta dentro del elemento o referenciado con el atributo href.
+ +

Contexto de uso

+ +

{{svginfo}}

+ +

Atributos

+ +

Atributos globales

+ + + +

Atributos específicos

+ + + +

DOM

+ +

Este elemento implementa la interfaz de SVGAnimateElement.

+ +

Ejemplo

+ +

SVG

+ +
<?xml version="1.0"?>
+<svg width="120" height="120" viewBox="0 0 120 120" version="1.1"
+     xmlns="http://www.w3.org/2000/svg">
+
+  <rect x="10" y="10" width="100" height="100">
+    <animate attributeType="XML" attributeName="x" from="-100" to="120"
+        dur="10s" repeatCount="indefinite"/>
+  </rect>
+</svg>
+ +

Result

+ +

{{EmbedLiveSample("Ejemplo", 120, 120)}}

+ +

Sobre Accesibilidad

+ +

Las animaciones titilantes e intermitentes pueden causar dificultades a las personas con discapacidades cognitivas como Trastorno por Déficit de Atención con Hiperactividad (ADHD) además de causar ataques a personas con cinestosis, epilepsia, migranias o síndrome de sensibilidad escotópica.

+ +

Por favor, considerá ofrecer un mecanismo para pausar o deshabilitar las animaciones, como utilizando Reduced Motion Media Query.

+ +

Para más información (en inglés):

+ + + +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("SVG Animations 2", "#AnimateElement", "<animate>")}}{{Spec2("SVG Animations 2")}}Sin cambios
{{SpecName("SVG1.1", "animate.html#AnimateElement", "<animate>")}}{{Spec2("SVG1.1")}}Definición inicial
+ +

Compatibilidad con navegadores

+ +
+ + +

{{Compat("svg.elements.animate")}}

+
diff --git a/files/es/web/svg/element/circle/index.html b/files/es/web/svg/element/circle/index.html new file mode 100644 index 0000000000..36b4f9e6c2 --- /dev/null +++ b/files/es/web/svg/element/circle/index.html @@ -0,0 +1,116 @@ +--- +title: circle +slug: Web/SVG/Element/circle +tags: + - Elemento + - Gráficos SVG + - Referencia + - SVG +translation_of: Web/SVG/Element/circle +--- +
{{SVGRef}}
+ +

El elemento circle es una forma básica de SVG, usada para crear circulos a partir de un punto, el cual indica el centro del circulo, y un radio.

+ +

Contexto de uso

+ +

{{svginfo}}

+ +

Ejemplo

+ +

 

+ +
<?xml version="1.0"?>
+<svg viewBox="0 0 120 120" version="1.1"
+  xmlns="http://www.w3.org/2000/svg">
+  <circle cx="60" cy="60" r="50"/>
+</svg>
+ +

 

+ +

» circulo.svg

+ +

Atributos

+ +

Atributos globales

+ + + +

Atributos específicos

+ + + +

Interfaz DOM

+ +

Este elemento implementa la interfaz {{ domxref("SVGCircleElement") }}.

+ +

Compatibilidad de navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico1.0{{ CompatGeckoDesktop('1.8') }}{{ CompatIE('9.0') }}{{ CompatOpera('8.0') }}{{ CompatSafari('3.0.4') }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{ CompatAndroid('3.0') }}{{ CompatGeckoMobile('1.8') }}{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ CompatSafari('3.0.4') }}
+
+ +

La gráfica está basada en estas fuentes.

+ +

Relacionado

+ + diff --git a/files/es/web/svg/element/foreignobject/index.html b/files/es/web/svg/element/foreignobject/index.html new file mode 100644 index 0000000000..ea64360cbb --- /dev/null +++ b/files/es/web/svg/element/foreignobject/index.html @@ -0,0 +1,133 @@ +--- +title: foreignObject +slug: Web/SVG/Element/foreignObject +translation_of: Web/SVG/Element/foreignObject +--- +
{{SVGRef}}
+ +

El elemento foreignObject permite la inclusión de un namespace XML externo que tiene su contenido gráfico dibujado por un diferente user-agent. El contenido gráfico externo incluido está sujeto a las transformaciones SVG y composición.

+ +

The contents of foreignObject are assumed to be from a different namespace. Any SVG elements within a foreignObject will not be drawn, except in the situation where a properly defined SVG subdocument with a proper xmlns attribute specification is embedded recursively. One situation where this can occur is when an SVG document fragment is embedded within another non-SVG document fragment, which in turn is embedded within an SVG document fragment (e.g., an SVG document fragment contains an XHTML document fragment which in turn contains yet another SVG document fragment).

+ +

Usually, a foreignObject will be used in conjunction with the {{ SVGElement("switch") }} element and the {{ SVGAttr("requiredExtensions") }} attribute to provide proper checking for user agent support and provide an alternate rendering in case user agent support is not available.

+ +

Usage context

+ +

{{svginfo}}

+ +

Example

+ +
<svg width="400px" height="300px" viewBox="0 0 400 300"
+     xmlns="http://www.w3.org/2000/svg">
+  <desc>This example uses the 'switch' element to provide a
+        fallback graphical representation of a paragraph, if
+        XHTML is not supported.</desc>
+
+  <!-- The 'switch' element will process the first child element
+       whose testing attributes evaluate to true.-->
+  <switch>
+
+    <!-- Process the embedded XHTML if the requiredExtensions attribute
+         evaluates to true (i.e., the user agent supports XHTML
+         embedded within SVG). -->
+    <foreignObject width="100" height="50"
+                   requiredExtensions="http://www.w3.org/1999/xhtml">
+      <!-- XHTML content goes here -->
+      <body xmlns="http://www.w3.org/1999/xhtml">
+        <p>Here is a paragraph that requires word wrap</p>
+      </body>
+    </foreignObject>
+
+    <!-- Else, process the following alternate SVG.
+         Note that there are no testing attributes on the 'text' element.
+         If no testing attributes are provided, it is as if there
+         were testing attributes and they evaluated to true.-->
+    <text font-size="10" font-family="Verdana">
+      <tspan x="10" y="10">Here is a paragraph that</tspan>
+      <tspan x="10" y="20">requires word wrap.</tspan>
+    </text>
+  </switch>
+</svg>
+
+ +

Attributes

+ +

Global attributes

+ + + +

Specific attributes

+ + + +

DOM Interface

+ +

This element implements the SVGForeignObjectElement interface.

+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.01.9{{ CompatNo() }}2.03.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}2.0{{ CompatNo() }}2.03.0
+
+ +

The chart is based on these sources.

diff --git a/files/es/web/svg/element/g/index.html b/files/es/web/svg/element/g/index.html new file mode 100644 index 0000000000..1c0438c53d --- /dev/null +++ b/files/es/web/svg/element/g/index.html @@ -0,0 +1,110 @@ +--- +title: g +slug: Web/SVG/Element/g +tags: + - Contenedor + - Contenedor SVG + - Elemento + - Referencia + - SVG +translation_of: Web/SVG/Element/g +--- +
{{SVGRef}}
+ +
El elemento g es un contenedor usado para agrupar objetos. Las transformaciones aplicadas al elemento g son realizadas sobre todos los elementos hijos del mismo. Los atributos aplicados son heredados por los elementos hijos. Además, puede ser usado para definir objetos complejos que pueden luego ser referenciados con el elemento {{SVGElement("use")}}.
+ +
 
+ +

Contexto de uso

+ +

{{svginfo}}

+ +

Ejemplo

+ +
<svg width="100%" height="100%" viewBox="0 0 95 50"
+     xmlns="http://www.w3.org/2000/svg">
+  <g stroke="green" fill="white" stroke-width="5">
+    <circle cx="25" cy="25" r="15" />
+    <circle cx="40" cy="25" r="15" />
+    <circle cx="55" cy="25" r="15" />
+    <circle cx="70" cy="25" r="15" />
+  </g>
+</svg>
+
+ +

{{EmbedLiveSample("Ejemplo",220,130)}}

+ +

Atributos

+ +

Atributos globales

+ + + +

Atributos Específicos

+ +

No hay atributos específicos

+ +

Interfaz DOM

+ +

Este elemento implementa la interfaz SVGGElement.

+ +

Compatibilidad con navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte Básico1.0{{CompatGeckoDesktop('1.8')}}{{CompatIE('9.0')}}{{CompatOpera('8.0')}}{{CompatSafari('3.0.4')}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte Básico{{CompatAndroid('3.0')}}{{CompatGeckoMobile('1.8')}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatSafari('3.0.4')}}
+
+ +

La tabla está basada en these sources.

diff --git a/files/es/web/svg/element/glifo/index.html b/files/es/web/svg/element/glifo/index.html new file mode 100644 index 0000000000..78f97fe3bb --- /dev/null +++ b/files/es/web/svg/element/glifo/index.html @@ -0,0 +1,114 @@ +--- +title: glyph +slug: Web/SVG/Element/glifo +tags: + - Contenido de texto SVG + - Elemento + - Fuentes SVG + - Glifos + - NeedsCompatTable + - Referencia + - SVG +translation_of: Web/SVG/Element/glyph +--- +
{{SVGRef}}
+ +

Un glifo define a un glifo en particular en una fuente SVG.

+ +

Contexto de uso

+ + + + + + + + + + + + + + + + +
CategoriesElemento de contenido de texto.
Permitted content +

Cualquier número de los siguientes elementos, en cualquier orden:
+ elementos de animación »
+ elementos descriptivos »
+ elementos de forma »
+ elementos estructurales »
+ elementos de gradiente »
+ {{ SVGElement("a") }}, {{ SVGElement("altGlyphDef") }}, {{ SVGElement("clipPath") }}, {{ SVGElement("color-profile") }}, {{ SVGElement("cursor") }}, {{ SVGElement("filter") }}, {{ SVGElement("font") }}, {{ SVGElement("font-face") }}, {{ SVGElement("foreignObject") }}, {{ SVGElement("image") }}, {{ SVGElement("marker") }}, {{ SVGElement("mask") }}, {{ SVGElement("pattern") }}, {{ SVGElement("script") }}, {{ SVGElement("style") }}, {{ SVGElement("switch") }}, {{ SVGElement("text") }}, {{ SVGElement("view") }}

+
Normative documentSVG 1.1 (Segunda edición)
+ +

Ejemplo

+ +
<?xml version="1.0" standalone="yes"?>
+<svg width="400px" height="300px" version="1.1"
+  xmlns = 'http://www.w3.org/2000/svg'>
+<!-- Example copied from http://www.w3.org/TR/SVG/fonts.html#GlyphElement -->
+  <defs>
+
+    <font id="Font1" horiz-adv-x="1000">
+      <font-face font-family="Super Sans" font-weight="bold" font-style="normal"
+          units-per-em="1000" cap-height="600" x-height="400"
+          ascent="700" descent="300"
+          alphabetic="0" mathematical="350" ideographic="400" hanging="500">
+        <font-face-src>
+          <font-face-name name="Super Sans Bold"/>
+        </font-face-src>
+      </font-face>
+
+      <missing-glyph><path d="M0,0h200v200h-200z"/></missing-glyph>
+      <glyph unicode="!" horiz-adv-x="80" d="M0,0h200v200h-200z"></glyph>
+      <glyph unicode="@" d="M0,50l100,300l400,100z"></glyph>
+
+    </font>
+  </defs>
+  <text x="100" y="100"
+           style="font-family: 'Super Sans', Helvetica, sans-serif;
+                  font-weight: bold; font-style: normal">Text
+    using embe@dded font!</text>
+</svg>
+
+
+
+ +

Atributos

+ +

Atributos globales

+ + + +

Atributos específicos

+ + + +

Interfaz DOM

+ +

Este elemento implementa la interfaz SVGGlyphElement.

+ +

Relacionado

+ + diff --git a/files/es/web/svg/element/index.html b/files/es/web/svg/element/index.html new file mode 100644 index 0000000000..cb741fc471 --- /dev/null +++ b/files/es/web/svg/element/index.html @@ -0,0 +1,297 @@ +--- +title: Referencia de Elementos SVG +slug: Web/SVG/Element +tags: + - NeedsTranslation + - SVG + - SVG Reference + - TopicStub +translation_of: Web/SVG/Element +--- +

« SVG / SVG Attribute reference »

+ +

Los dibujos e imágenes SVG son creados utilizando una amplia variedad de elementos dedicados a la construcción, el dibujo y el diseño de imágenes y diagramas vectoriales. Aquí encontrarás la documentación de referencia para cada uno de los elementos SVG.

+ +

Elementos SVG

+ +
+

A

+ +
    +
  • {{SVGElement("a")}}
    • +
  • {{SVGElement("animate")}}
    • +
  • {{SVGElement("animateMotion")}}
    • +
  • {{SVGElement("animateTransform")}}
    • +
+ +

C

+ +
    +
  • {{SVGElement("circle")}}
    • +
  • {{SVGElement("clipPath")}}
    • +
  • {{SVGElement("color-profile")}}
    • +
+ +

D

+ +
    +
  • {{SVGElement("defs")}}
    • +
  • {{SVGElement("desc")}}
    • +
  • {{SVGElement("discard")}}
    • +
+ +

E

+ +
    +
  • {{SVGElement("ellipse")}}
    • +
+ +

F

+ +
    +
  • {{SVGElement("feBlend")}}
    • +
  • {{SVGElement("feColorMatrix")}}
    • +
  • {{SVGElement("feComponentTransfer")}}
    • +
  • {{SVGElement("feComposite")}}
    • +
  • {{SVGElement("feConvolveMatrix")}}
    • +
  • {{SVGElement("feDiffuseLighting")}}
    • +
  • {{SVGElement("feDisplacementMap")}}
    • +
  • {{SVGElement("feDistantLight")}}
    • +
  • {{SVGElement("feDropShadow")}}
    • +
  • {{SVGElement("feFlood")}}
    • +
  • {{SVGElement("feFuncA")}}
    • +
  • {{SVGElement("feFuncB")}}
    • +
  • {{SVGElement("feFuncG")}}
    • +
  • {{SVGElement("feFuncR")}}
    • +
  • {{SVGElement("feGaussianBlur")}}
    • +
  • {{SVGElement("feImage")}}
    • +
  • {{SVGElement("feMerge")}}
    • +
  • {{SVGElement("feMergeNode")}}
    • +
  • {{SVGElement("feMorphology")}}
    • +
  • {{SVGElement("feOffset")}}
    • +
  • {{SVGElement("fePointLight")}}
    • +
  • {{SVGElement("feSpecularLighting")}}
    • +
  • {{SVGElement("feSpotLight")}}
    • +
  • {{SVGElement("feTile")}}
    • +
  • {{SVGElement("feTurbulence")}}
    • +
  • {{SVGElement("filter")}}
    • +
  • {{SVGElement("foreignObject")}}
    • +
+ +

G

+ +
    +
  • {{SVGElement("g")}}
    • +
+ +

H

+ +
    +
  • {{SVGElement("hatch")}}
    • +
  • {{SVGElement("hatchpath")}}
    • +
+ +

I

+ +
    +
  • {{SVGElement("image")}}
    • +
+ +

L

+ +
    +
  • {{SVGElement("line")}}
    • +
  • {{SVGElement("linearGradient")}}
    • +
+ +

M

+ +
    +
  • {{SVGElement("marker")}}
    • +
  • {{SVGElement("mask")}}
    • +
  • {{SVGElement("mesh")}}
    • +
  • {{SVGElement("meshgradient")}}
    • +
  • {{SVGElement("meshpatch")}}
    • +
  • {{SVGElement("meshrow")}}
    • +
  • {{SVGElement("metadata")}}
    • +
  • {{SVGElement("mpath")}}
    • +
+ +

P

+ +
    +
  • {{SVGElement("path")}}
    • +
  • {{SVGElement("pattern")}}
    • +
  • {{SVGElement("polygon")}}
    • +
  • {{SVGElement("polyline")}}
    • +
+ +

R

+ +
    +
  • {{SVGElement("radialGradient")}}
    • +
  • {{SVGElement("rect")}}
    • +
+ +

S

+ +
    +
  • {{SVGElement("script")}}
    • +
  • {{SVGElement("set")}}
    • +
  • {{SVGElement("solidcolor")}}
    • +
  • {{SVGElement("stop")}}
    • +
  • {{SVGElement("style")}}
    • +
  • {{SVGElement("svg")}}
    • +
  • {{SVGElement("switch")}}
    • +
  • {{SVGElement("symbol")}}
    • +
  • <
    • +
+ +

T

+ +
    +
  • {{SVGElement("text")}}
    • +
  • {{SVGElement("textPath")}}
    • +
  • {{SVGElement("title")}}
    • +
  • {{SVGElement("tspan")}}
    • +
+ +

U

+ +
    +
  • {{SVGElement("unknown")}}
    • +
  • {{SVGElement("use")}}
    • +
+ +

V

+ +
    +
  • {{SVGElement("view")}}
    • +
+
+ +

Elementos SVG por Categorías

+ +

Elementos de Animación

+ +

{{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateMotion")}}, {{SVGElement("animateTransform")}}, {{SVGElement("discard")}}, {{SVGElement("mpath")}}, {{SVGElement("set")}}

+ +

Formas básicas

+ +

{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}

+ +

Elementos Contenedores

+ +

{{SVGElement("a")}}, {{SVGElement("defs")}}, {{SVGElement("g")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("missing-glyph")}}, {{SVGElement("pattern")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}, {{SVGElement("unknown")}}

+ +

Elementos Descriptivos

+ +

{{SVGElement("desc")}}, {{SVGElement("metadata")}}, {{SVGElement("title")}}

+ +

Elementos de Filtros Primitivos

+ +

{{SVGElement("feBlend")}}, {{SVGElement("feColorMatrix")}}, {{SVGElement("feComponentTransfer")}}, {{SVGElement("feComposite")}}, {{SVGElement("feConvolveMatrix")}}, {{SVGElement("feDiffuseLighting")}}, {{SVGElement("feDisplacementMap")}}, {{SVGElement("feDropShadow")}}, {{SVGElement("feFlood")}},{{SVGElement("feFuncA")}}, {{SVGElement("feFuncB")}}, {{SVGElement("feFuncG")}}, {{SVGElement("feFuncR")}},{{SVGElement("feGaussianBlur")}}, {{SVGElement("feImage")}}, {{SVGElement("feMerge")}}, {{SVGElement("feMergeNode")}}, {{SVGElement("feMorphology")}}, {{SVGElement("feOffset")}}, {{SVGElement("feSpecularLighting")}}, {{SVGElement("feTile")}}, {{SVGElement("feTurbulence")}}

+ +

Elementos de Fuentes

+ +

{{SVGElement("font")}}, {{SVGElement("font-face")}}, {{SVGElement("font-face-format")}}, {{SVGElement("font-face-name")}}, {{SVGElement("font-face-src")}}, {{SVGElement("font-face-uri")}}, {{SVGElement("hkern")}}, {{SVGElement("vkern")}}

+ +

Elementos de Gradientes

+ +

{{SVGElement("linearGradient")}}, {{SVGElement("meshgradient")}}, {{SVGElement("radialGradient")}}, {{SVGElement("stop")}}

+ +

Elementos Gráficos

+ +

{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("text")}}, {{SVGElement("use")}}

+ +

Elementos de referencia de gráficos

+ +

{{SVGElement("mesh")}}, {{SVGElement("use")}}

+ +

Elementos que crean luz

+ +

{{SVGElement("feDistantLight")}}, {{SVGElement("fePointLight")}}, {{SVGElement("feSpotLight")}}

+ +

Elementos que no se renderizan

+ +

{{SVGElement("clipPath")}}, {{SVGElement("defs")}}, {{SVGElement("hatch")}}, {{SVGElement("linearGradient")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("meshgradient")}}, {{SVGElement("metadata")}}, {{SVGElement("pattern")}}, {{SVGElement("radialGradient")}}, {{SVGElement("script")}}, {{SVGElement("style")}}, {{SVGElement("symbol")}}, {{SVGElement("title")}}

+ +

Elementos de servidor para pintar

+ +

{{SVGElement("hatch")}}, {{SVGElement("linearGradient")}}, {{SVGElement("meshgradient")}}, {{SVGElement("pattern")}}, {{SVGElement("radialGradient")}}, {{SVGElement("solidcolor")}}

+ +

Elementos renderizables

+ +

{{SVGElement("a")}}, {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("foreignObject")}}, {{SVGElement("g")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}, {{SVGElement("text")}}, {{SVGElement("textPath")}}, {{SVGElement("tspan")}}, {{SVGElement("unknown")}}, {{SVGElement("use")}}

+ +

Elementos de forma

+ +

{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}

+ +

Elementos estructurales

+ +

{{SVGElement("defs")}}, {{SVGElement("g")}}, {{SVGElement("svg")}}, {{SVGElement("symbol")}}, {{SVGElement("use")}}

+ +

Elementos de contenido textual

+ +

{{SVGElement("altGlyph")}}, {{SVGElement("altGlyphDef")}}, {{SVGElement("altGlyphItem")}}, {{SVGElement("glyph")}}, {{SVGElement("glyphRef")}}, {{SVGElement("textPath")}}, {{SVGElement("text")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}

+ +

Elementos secundarios de contenido textual

+ +

{{SVGElement("altGlyph")}}, {{SVGElement("textPath")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}

+ +

Elementos sin categorizar

+ +

{{SVGElement("clipPath")}}, {{SVGElement("color-profile")}}, {{SVGElement("cursor")}}, {{SVGElement("filter")}}, {{SVGElement("foreignObject")}}, {{SVGElement("hatchpath")}}, {{SVGElement("meshpatch")}}, {{SVGElement("meshrow")}}, {{SVGElement("script")}}, {{SVGElement("style")}}, {{SVGElement("view")}}

+ +

Elementos obsoletos y deprecated

+ +
+

Advertencia: Estos son elementos antiguos de SVG que están en desuso y no deben utilizarse.  Nunca debe usarlos en nuevos proyectos, y debe reemplazarlos en proyectos antiguos tan pronto como sea posible. Se enumeran aquí sólo con fines informativos.

+
+ +

 

+ +

A

+ +

{{SVGElement("altGlyph")}}, {{SVGElement("altGlyphDef")}}, {{SVGElement("altGlyphItem")}}, {{SVGElement("animateColor")}}

+ +

C

+ +

{{SVGElement("cursor")}}

+ +

F

+ +

{{SVGElement("font")}}, {{SVGElement("font-face")}}, {{SVGElement("font-face-format")}}, {{SVGElement("font-face-name")}}, {{SVGElement("font-face-src")}}, {{SVGElement("font-face-uri")}}

+ +

G

+ +

{{SVGElement("glyph")}}, {{SVGElement("glyphRef")}}

+ +

H

+ +

{{SVGElement("hkern")}}

+ +

M

+ +

{{SVGElement("missing-glyph")}}

+ +

T

+ +

{{SVGElement("tref")}}

+ +

V

+ +

{{SVGElement("vkern")}}

+ +

 

+ +

Véase también

+ + + +

{{SVGRef}}

diff --git a/files/es/web/svg/element/rect/index.html b/files/es/web/svg/element/rect/index.html new file mode 100644 index 0000000000..b61b77ba47 --- /dev/null +++ b/files/es/web/svg/element/rect/index.html @@ -0,0 +1,141 @@ +--- +title: rect +slug: Web/SVG/Element/rect +tags: + - Elemento + - Gráficos SVG + - Referencia + - SVG +translation_of: Web/SVG/Element/rect +--- +
{{SVGRef}}
+ +

El elemento rect es una forma básica de SVG, usada para crear rectángulos basada en la posición de una esquina, su alto y ancho.
+ También podría ser usada para crear rectángulos con esquinas redondeadas.

+ +

Contexto de uso

+ +

{{svginfo}}

+ +

Ejemplo

+ +

Uso simple de rect

+ +

 

+ +
<?xml version="1.0"?>
+<svg width="120" height="120"
+     viewBox="0 0 120 120"
+     xmlns="http://www.w3.org/2000/svg">
+
+  <rect x="10" y="10" width="100" height="100"/>
+</svg>
+ +

 

+ +

» rect-1.svg

+ +

rect con esquinas redondeados

+ +

 

+ +
<?xml version="1.0"?>
+<svg width="120" height="120"
+     viewBox="0 0 120 120"
+     xmlns="http://www.w3.org/2000/svg">
+
+  <rect x="10" y="10"
+        width="100" height="100"
+        rx="15" ry="15"/>
+
+</svg>
+ +

» rect-2.svg

+ +

Atributos

+ +

Atributos globales

+ + + +

Atributos específicos

+ + + +

Interfaz DOM

+ +

Este elemento implementa la interfaz SVGRectElement.

+ +

Compatibilidad de los Navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{ CompatGeckoDesktop('1.8') }}{{ CompatIE('9.0') }}{{ CompatOpera('8.0') }}{{ CompatSafari('3.0.4') }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatAndroid('3.0') }}{{ CompatGeckoMobile('1.8') }}{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ CompatSafari('3.0.4') }}
+
+ +

Esta tabla está basada en estos recursos.

+ +

Ver también

+ + diff --git a/files/es/web/svg/element/style/index.html b/files/es/web/svg/element/style/index.html new file mode 100644 index 0000000000..f48b22ad0a --- /dev/null +++ b/files/es/web/svg/element/style/index.html @@ -0,0 +1,112 @@ +--- +title: style +slug: Web/SVG/Element/style +translation_of: Web/SVG/Element/style +--- +
{{SVGRef}}
+ +

El elemento style permite agregar directamente hojas de estilo en el contenido del SVG. El elemento style de SVG tiene los mismos atributos que el elemento correspondiente en HTML (ver elemento  {{ HTMLElement("style") }} de HTML).

+ +

Usage context

+ +

{{svginfo}}

+ +

Ejemplo

+ +
<svg width="100%" height="100%" viewBox="0 0 100 100"
+     xmlns="http://www.w3.org/2000/svg">
+  <style type="text/css">
+    /* <![CDATA[ */
+    circle {
+      fill: orange;
+      stroke: black;
+      stroke-width: 10px; // Note that the value of a pixel depend on the viewBox
+    }
+    /* ]]> */
+  </style>
+
+  <circle cx="50" cy="50" r="40" />
+</svg>
+
+ +

Live result:

+ +

{{EmbedLiveSample("Ejemplo",150,165)}}

+ +

Atributos

+ +

Atributos globales

+ + + +

Atributos específicos

+ + + +

DOM Interface

+ +

Este elemento implementa la interfaz SVGStyleElement.

+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{ CompatGeckoDesktop('1.8') }}{{ CompatIE('9.0') }}{{ CompatOpera('9.0') }}{{ CompatSafari('3.0.4') }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatAndroid('3.0') }}{{ CompatGeckoMobile('1.8') }}{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ CompatSafari('3.0.4') }}
+
+ +

The chart is based on these sources.

+ +

See also

+ + diff --git a/files/es/web/svg/element/svg/index.html b/files/es/web/svg/element/svg/index.html new file mode 100644 index 0000000000..93409888a6 --- /dev/null +++ b/files/es/web/svg/element/svg/index.html @@ -0,0 +1,110 @@ +--- +title: +slug: Web/SVG/Element/svg +tags: + - Contenedor SVG + - Elemento + - Referencia + - SVG + - red +translation_of: Web/SVG/Element/svg +--- +

El elemento svg es un contenedor que define un nuevo sistema de coordenadas y viewport. Es usado como el elemento más externo de cualquier documento SVG, pero también puede ser usado para agregar un fragmento de un SVG dentro de un documento SVG o HTML.

+ +

Contexto de Uso

+ +

{{svginfo}}

+ +

Ejemplo

+ +

Considere la sigiente imagen SVG (representando la bandera nacional de Italia):

+ +
<svg xmlns="http://www.w3.org/2000/svg"
+     width="150" height="100" viewBox="0 0 3 2">
+
+  <rect width="1" height="2" x="0" fill="#008d46" />
+  <rect width="1" height="2" x="1" fill="#ffffff" />
+  <rect width="1" height="2" x="2" fill="#d2232c" />
+</svg>
+ +

Esta puede ser incluida en un docuemnto HTML5 de la siguiente manera:

+ +
<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8" />
+  <title>HTML/SVG Example</title>
+</head>
+
+<body>
+
+  <svg width="150" height="100" viewBox="0 0 3 2">
+    <rect width="1" height="2" x="0" fill="#008d46" />
+    <rect width="1" height="2" x="1" fill="#ffffff" />
+    <rect width="1" height="2" x="2" fill="#d2232c" />
+  </svg>
+
+</body>
+</html>
+ +

Atributos

+ +

Atributos Globales

+ + + +

Specific attributes

+ + + +

Interfaz DOM

+ +

Este elemento implementa SVGSVGElement en la interfaz.

+ +

Specificaciones

+ + + + + + + + + + + + + + + + + + + + + +
SpecificaciónEstadoComentario
{{SpecName('SVG2', 'struct.html#NewDocument', '<svg>')}}{{Spec2('SVG2')}}
{{SpecName('SVG1.1', 'struct.html#NewDocument', '<svg>')}}{{Spec2('SVG1.1')}}Initial definition
+ +

Compatibilidad de Navegador

+ +

{{Compat("svg.elements.svg")}}

diff --git a/files/es/web/svg/element/text/index.html b/files/es/web/svg/element/text/index.html new file mode 100644 index 0000000000..e694d9dd52 --- /dev/null +++ b/files/es/web/svg/element/text/index.html @@ -0,0 +1,152 @@ +--- +title: text +slug: Web/SVG/Element/text +translation_of: Web/SVG/Element/text +--- +
{{SVGRef}}
+ +

El elemento text define un elemento gráfico que consiste en texto. Nótese que es posible aplicar un degradado, patrón, recorte, máscara o filtro al texto

+ +

Uso

+ +

{{svginfo}}

+ +

Ejemplo

+ +
<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="100px" height="30px" viewBox="0 0 1000 300">
+
+  <text x="250" y="150"
+        font-family="Verdana"
+        font-size="55">
+    Hello, out there
+  </text>
+
+  <!-- Show outline of canvas using 'rect' element -->
+  <rect x="1" y="1" width="998" height="298"
+        fill="none" stroke-width="2" />
+</svg>
+
+ +

El elemento <text> es usado para dibujar texto. El siguiente código de ejemplo es usado para dibujar texto con coordenadas.

+ +
<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="50px">
+  <text x="10" y="20">SVG Text Example</text>
+</svg>
+
+ +

El elemento text puede ser rotado. El siguiente código de ejemplo muestra cómo.

+ +
<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="50px">
+  <text x="10"  y="20"
+        transform="rotate(30 20,40)">
+    SVG Text Rotation example
+  </text>
+</svg>
+
+ +

SVG text también puede ser estilizado

+ +
<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="50px">
+  <text x="10"  y="20"
+        style="font-family: Times New Roman;
+               font-size  : 24;
+               stroke     : #00ff00;
+               fill       : #0000ff;">
+    SVG text styling
+  </text>
+</svg>
+
+ +

Atributos

+ +

Atributos globales

+ + + +

Atributos específicos

+ + + +

Interfaz DOM

+ +

Este elemento hereda la interfaz de SVGTextElement.

+ +

Compatibilidad con navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)IEOperaSafari
Basic support{{ CompatChrome('1.0') }}{{ CompatGeckoDesktop('1.8') }}{{ CompatIE('9.0') }}{{ CompatOpera('8.0') }}{{ CompatSafari('3.0.4') }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatAndroid('3.0') }}{{ CompatGeckoMobile('1.8') }}{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ CompatSafari('3.0.4') }}
+
+ +

La gráfica está basada en  estas fuentes.

+ +

Relacionados

+ + diff --git a/files/es/web/svg/element/use/index.html b/files/es/web/svg/element/use/index.html new file mode 100644 index 0000000000..32c7a4c086 --- /dev/null +++ b/files/es/web/svg/element/use/index.html @@ -0,0 +1,154 @@ +--- +title: +slug: Web/SVG/Element/use +tags: + - Elementos + - Gráficos SVG + - Referencia + - SVG +translation_of: Web/SVG/Element/use +--- +
{{SVGRef}}
+ +

El elemento use toma los nodos que están dentro del documento SVG y duplica el contenido donde éste esté siendo utilizado. El efecto es el mismo, como si éstos nodos hubiesen sido profundamente clonados en un elemento DOM no expuesto, y luego pegados donde se encuentra el elemeto use, al igual que los elementos plantilla son clonados en HTML5. Desde que los elementos clonados no sean expuestos como DOM, su cuidado debe tomarse en cuenta durante el uso de CSS para estilizar un elemento use y sus descendientes ocultos. Los atributos CSS no ofrecen la garantía de heredarse en los elementos DOM clonados y escondidos, a no ser que lo realice utilizando herencia CSS.

+ +

Por razones de seguridad, algunos navegadores podrían aplicar una política del mismo origen sobre los elementos use y podrían negarse a cargar una URI de origen cruzado dentro del atributo xlink:href.

+ +

Contexto de uso

+ +

{{svginfo}}

+ +

Ejemplo

+ +
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <style>
+    .classA { fill:red }
+  </style>
+  <defs>
+    <g id="Port">
+      <circle style="fill:inherit" r="10"/>
+    </g>
+  </defs>
+
+  <text y="15">black</text>
+  <use x="50" y="10" xlink:href="#Port" />
+  <text y="35">red</text>
+  <use x="50" y="30" xlink:href="#Port" class="classA"/>
+  <text y="55">blue</text>
+  <use x="50" y="50" xlink:href="#Port" style="fill:blue"/>
+ </svg>
+
+ +

 

+ +

Atributos

+ +

Atributos Globales

+ + + +

Atributos específicos

+ +
    +
  • {{ SVGAttr("x") }}
    • +
  • {{ SVGAttr("y") }}
    • +
  • {{ SVGAttr("width") }}
    • +
  • {{ SVGAttr("height") }}
    • +
  • {{ SVGAttr("xlink:href") }}
    • +
+ +

Interfaz DOM

+ +

Este elemento implementa la interface SVGUseElement.

+ +

Compatibilidad entre navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Carga desde una URL externa{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{CompatNo()}}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Carga desde dato: URI{{ CompatUnknown() }}{{ CompatGeckoDesktop("10.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Carga desde una URL externa{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Carga desde dato: URI{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
diff --git a/files/es/web/svg/index.html b/files/es/web/svg/index.html new file mode 100644 index 0000000000..642ed8aedf --- /dev/null +++ b/files/es/web/svg/index.html @@ -0,0 +1,110 @@ +--- +title: SVG +slug: Web/SVG +tags: + - Gráficos 2D + - Gráficos(2) + - SVG + - Todas_las_Categorías + - Web +translation_of: Web/SVG +--- +
Comenzando con SVG
+Este tutorial te ayudará a comenzar a usar SVG.
+ +

Gráficos vectoriales escalables (SVG) es un lenguaje de marcado XML para describir gráficos vectoriales en dos dimensiones. Básicamente, es a los gráficos lo que HTML es al texto.

+ +

SVG es un estándar Web abierto basado en texto. Está expresamente diseñado para trabajar con otros estándares web como CSS, DOM, y SMIL.

+ +

<br style="clear:both;" />

+ + + + + + + + +
+

Documentación

+ +
+
Referencia de elementos SVG
+
Detalles sobre cada uno de los elementos SVG.
+
Referencia de atributos SVG
+
Detalles sobre cada uno de los atributos SVG.
+
Referencia del interfaz DOM SVG
+
Detalles acerca del API SVG DOM, para interacción con JavaScript.
+
Aplicando efectos SVG a contenido HTML
+
SVG trabaja con with {{Glossary("HTML")}}, {{Glossary("CSS")}} and {{Glossary("JavaScript")}}. Usa SVG para mejorar una página HTML normal o aplicación web.
+
+

Ver más...

+
+
+

Comunidad

+ Ver foros de Mozilla... {{DiscussionList("dev-tech-svg", "mozilla.dev.tech.svg")}}
+
 
+
+ +

Herramientas

+ + + 		+

Ejemplos

+ +
+ + +

 

+ +

Animaciones e interacciones

+ +

Al igual que HTML, SVG tiene un modelo de objetos de documento (DOM) y eventos, y es accesible desde JavaScript. Esto permite al desarrollador crear animaciones ricas y permite e imágenes interactivas.

+ +
    +
  • Algunos SVG muy atractivos en svg-wow.org
    • +
  • Extension Firefox (Grafox) para añadir soporte al subconjunto de animación {{Glossary("SMIL")}}
    • +
  • Manipulación interactiva de fotos
    • +
  • Transformaciones HTML usando foreignObject de SVG
    • +
+ +

 

+ +

Mapeado, gráficos, juegos y experimentos 3D

+ +

Aunque un poco de SVG puede dar mucho recorrido a la hora de mejorar contenidos web, aquí tienes algunos ejemplos de uso de gran cantidad de SVG.

+ + +
+
+ +

Categorías

+ +

Interwiki Language Links

+ +

 

+ +

{{ languages( { "en": "en/SVG", "fr": "fr/SVG", "it": "it/SVG", "ja": "ja/SVG", "pl": "pl/SVG", "pt": "pt/SVG" } ) }}

diff --git a/files/es/web/svg/index/index.html b/files/es/web/svg/index/index.html new file mode 100644 index 0000000000..a9cf2d3736 --- /dev/null +++ b/files/es/web/svg/index/index.html @@ -0,0 +1,6 @@ +--- +title: SVG documentation index +slug: Web/SVG/Index +translation_of: Web/SVG/Index +--- +

{{Index("/en-US/docs/Web/SVG")}}

diff --git a/files/es/web/svg/svg_en_firefox_1.5/index.html b/files/es/web/svg/svg_en_firefox_1.5/index.html new file mode 100644 index 0000000000..f2d954e573 --- /dev/null +++ b/files/es/web/svg/svg_en_firefox_1.5/index.html @@ -0,0 +1,60 @@ +--- +title: SVG en Firefox 1.5 +slug: Web/SVG/SVG_en_Firefox_1.5 +tags: + - SVG + - Todas_las_Categorías +--- +

+Firefox 1.5 marca la publicación del primer navegador de Mozilla que soporta el formato de gráficos vectoriales escalables (SVG). El camino de este proyecto ha sido largo, nos satisface poner a disposición de los desarrolladores esta tecnologia y estamos impacientes por ver sus frutos.

Firefox SVG es un subconjunto de SVG 1.1, pero no es ninguno de los perfiles oficiales (Tiny, Basic, Full). En este documento se puede encontrar una lista completa de los elementos que han sido implementados en Firefox 1.5. Además encontrará información sobre las limitaciones en su implementación. +

La peculiar implementación que hemos realizado puede dificultar el creación de contenidos, le pedimos que tenga paciencia mientras trabajamos en la implementación completa de esta extensa especificación. +

Mientras lee esto, usted puede preguntarse cuandos de estos detalles sobre de la implementación pueden haber cambiado. Por desgracia el mapa de ruta actual situa la publicación de Firefox con Gecko 1.9 en el primer trimestre de 2007. Sin embargo si usted desea comenzar a experimentar con las nuevas funcionalidades, tiene a su disposición en las nightly builds las últimas evoluciones, y si lo desea puede consultar la tabla actualizada sobre la implementación de SVG en la versión de desarrollo. Como podreis comprobar, la cosa avanza a buen ritmo ☺. +


+

+

Performance

+

Firefox usa el mismo motor de renderizado, cairo, en todas las plataformas en las que navega. Por lo tanto sus características de interpretación serán similares. La Performance en linux es la más difícil de predecir, esto es debido a las distintas implementaciones que hacen los diversos servidores X de la extensión RENDER. +

En Windows el renderizado de SVG es bastante más rápido que en otras plataformas. +

+

Coordinate range

+

Si tu contenido posee geometría con un gran rango de coordenadas, necesitarás tener cuidado con los problemas causados por el uso interno de cairo de una representación en punto fijo de 16.16 bit para sus cálculos. Cairo no clip primitives antes de la rasterización, por lo que las coordenadas finales tras la transformación que excedan el rango desde -32678 a 32677 causarán errores de renderizado y posiblemente un funcionamiento bastante lento. +

+

Texto en Windows 98

+

Un lamentable efecto secundario de usar Cairo como backend de renderizado en Windows es que el renderizado del texto no funcionará en Windows 98. En realidad la cosa es aun peor, si aparece cualquier texto durante la visualización de contenidos SVG, todo el dibujo se parará. +

+

Selección de fuente

+

Si usted está familiarizado con CSS probablemente sabrá que puede especificar fuentes alternativas para las propiedades 'font' por si los glifos de una fuente concreta no estén disponibles. El actual motor de renderizado de SVG sólo tratará de usar la primera fuente especificada, y si esta no existe, usará una fuente del sistema. Las fuentes secundarias nunca son usadas, por ejemplo, font-family="Arial,LucidaSansUnicode" no generará una fuente LucidaSansUnicode, aun en el caso de que Arial no esté disponible. +

+

Impresión

+

Por desgracia, actualmente en la impresión no se aprovechan las propiedades vectoriales de SVG para generar una salida óptima, por contra, se renderiza según la resolución de la pantalla y luego la salida se hace como imagen. +

Al imprimir en MS-Windows, el tamaño de la fuente será mucho más grande que el especificado por SVG. +

+

Opacidad de grupo

+

La propiedad de opacidad de grupo "opacity" permite que los objetos contenedores SVG puedan ser tratados como capas semi-transparentes, y sea separado de propiedades "fill-opacity" y "stroke-opacity" La implementacion actual de "opacity" consume bastantes recursos, debería ser usada con mesura. "fill-opacity" y "stroke-opacity" son mucho más rápidas, y dependiendo de su contenido pueden aportar los mismos resultados. +

Actualmente la opacidad de grupo está implementado solo para <g> pero no para <text> o <svg> +

+

Stroking fonts

+

On the MS-Windows and OS-X platforms, the stroke of the text will not exactly match the fill. The error is typically quite small, and can be covered by using a slightly thicker stroke. An example of this difference: +


+Imagen:Text-fill-stroke.png +

+

<image>

+

<image> no soporta imágenes SVG en Firefox 1.5, sólo los formatos de imagen rasterizados que Firefox maneja. +

Todas las instancias de <image> tienen una copia separada de la imagen que está siendo usada, lo cual es algo a tener en cuenta si tu contenido está usando múltiples copias de una imagen para un icono o algo parecido. Desafortunadamente, <use> en contenido <image> cuenta como otra copia en este caso. +

De manera adicional, un uso intensivo de imágenes rasterizadas en SVG puede degradar de sobremanera el rendimiento en Firefox 1.5. +

+

Eventos

+

Soportamos los atributos de SVG para eventos, a excepción de "onfocusin", "onfocusout", y "onactivate". +

Nuestro manejo del evento "onload" es actualmente no-estándar, pero creemos que aún así no impide su uso correcto. Mientras que el código especificado por el atributo "onload" será llamado para cada elemento, un evento SVGLoad es llamado únicamente para el elemento <svg> raíz. Algunos métodos DOM devolverán basura o error si son llamados antes de que el elemento correspondiente haya sido renderizado, algo que tendrás que tener en cuenta al escribir código "onload". Dichos métodos son getBBox, getScreenCTM, etc. +

No damos soporte a los eventos para el teclado específicos de Adobe ("onkeydown", "onkeyup"). +

+

Interoperabilidad

+

Si está trabajando con contenidos SVG actuales, puede encontrar problemas al cargarlos en Firefox. La mayoría de los problemas suelen ser triviales, y son el resultado de una implementación más estricta en Firefox. En SVG Authoring Guidelines Jonathan Watt's explica los problemas comunes. +

+

Situaciones del uso

+

Firefox 1.5 maneja SVG como un documento entero, o como referencia para los elementos embed, object, e iframe. Actualmente no puede ser usado como fuente del elemento img, ni para las propiedades CSS relativas a las imágenes. +

+

Animación

+

Firefox 1.5 no implementa la animación declarativa, pero soporta scripting dinámico. Doug Shepers lo ha usado para crear SmilScript, una pequeña biblioteca de Javascript que implementa parte de la animación declarativa de SVG. +

+

Elementos, estado de la implementación

Elemento Notas
Módulo Estructura
svg
  • Implementado.
  • currentScale and currentTranslate DOM attributes are implemented, but there is no pan and zoom user interface.
  • SVGSVGElement
    • Atributos no implementados: contentScriptType, contentStyleType, viewport, useCurrentView, currentView
    • Bindings no implementados: pauseAnimations, unpauseAnimations, animationsPaused, getCurrentTime, setCurrentTime, getIntersectionList, getEnclosureList, checkIntersection, checkEnclosure, deselectAll, createSVGAngle, getElementById
g
  • Implementado.
defs
  • Implementado.
desc
  • Implementado.
  • Only stored in the DOM, no user interface.</td>
title
  • Implementado.
metadata
  • Implementado.
  • Only stored in the DOM, no user interface.</td>
symbol
  • Implementado.
use
  • Implementado.
  • Only works for internal document references (bug 269482).
  • Doesn't completely follow <svg:use> cascading rules (bug 265894).
  • Doesn't deliver events to a SVGElementInstance tree (bug 265895).
Conditional Processing Module
switch
  • Implementado.
Image Module
image
  • Implementado.
  • Only works for raster images (bug 272288).
Style Module
style
  • Implementado.
Shape Module
path
  • Implementado.
  • SVGPathElement Interfaz
    • Atributos no implementados: pathLength, normalizedPathSegList, animatedPathSegList, animatedNormalizedPathSegList
    • Bindings no implementados: getTotalLength, getPointAtLength, getPathSegAtLength
  • SVGPathSegList Interface
    • Bindings no implementados: replaceItem()
rect
  • Implementado.
circle
  • Implementado.
line
  • Implementado.
ellipse
  • Implementado.
polyline
  • SImplementado.
polygon
  • Implementado.
Módulo Texto
text
  • Implementado.
  • SVGTextElement
    • Atributos no implementados: rotate, textLength, lengthAdjust
    • Bindings no implementados: getNumberOfChars, getSubStringLength, getStartPositionOfChar, getEndPositionOfChar, getRotationOfChar, getCharNumAtPosition, selectSubString
    • Bindings not functional at onload time: getExtentOfChar
tspan
  • Implementado.
  • SVGTSpanElement
    • Atributos no implementados: rotate, textLength, lengthAdjust
    • bindings no implementados: getNumberOfChars, getComputedTextLength, getSubStringLength, getStartPositionOfChar, getEndPositionOfChar, getExtentOfChar, getRotationOfChar, getCharNumAtPosition, selectSubString
tref
  • No implementado.
textPath
  • No implementado.
altGlyph
  • No implementado.
altGlyphDef
  • No implementado.
altGlyphItem
  • No implementado.
glyphRef
  • No implementado.
Módulo Marker
marker
  • Implementado.
Módulo Color-Profile
color-profile
  • No implementado.
Módulo Gradientes
linearGradient
  • Implementado.
radialGradient
  • Implementado.
stop
  • Implementado.
Módulo Pattern
pattern
  • No implementado.
Módulo Clip
clipPath
  • Implementado.
  • Won't handle clip paths with have elements with different clip-rule properties or that reference other clipPaths. (bug 267224).
Módulo Mask
mask
  • No implementado.
Módulo Filtro
filter
  • No implementado.
feBlend
  • No implementado.
feColorMatrix
  • No implementado.
feComponentTransfer
  • No implementado.
feComposite
  • No implementado.
feConvolveMatrix
  • No implementado.
feDiffuseLighting
  • No implementado.
feDisplacementMap
  • No implementado.
feFlood
  • No implementado.
feGaussianBlur
  • No implementado.
feImage
  • No implementado.
feMerge
  • No implementado.
feMergeNode
  • No implementado.
feMorphology
  • No implementado.
feOffset
  • No implementado.
feSpecularLighting
  • No implementado.
feTile
  • No implementado.
feTurbulence
  • No implementado.
feDistantLight
  • No implementado.
fePointLight
  • No implementado.
feSpotLight
  • No implementado.
feFuncR
  • No implementado.
feFuncG
  • No implementado.
feFuncB
  • No implementado.
feFuncA
  • No implementado.
Módulo Cursor
cursor
  • No implementado.
Módulo hiperenlace
a
  • Implementado en un binding XBL - object no es del tipo SVGAElement.
  • Solo están implementados los atributos xlink:href y xlink:show
  • Sobre el atributo target vea bug 300868
Módulo visión
view
  • No implementado.
Módulo Script
script
  • Implementado.
Módulo Animación
animate
  • No implementado.
set
  • No implementado.
animateMotion
  • No implementado.
animateTransform
  • No implementado.
animateColor
  • No implementado.
mpath
  • No implementado.
Módulo Fuentes
font
  • No implementado.
font-face
  • No implementado.
glyph
  • No implementado.
missing-glyph
  • No implementado.
hkern
  • No implementado.
vkern
  • No implementado.
font-face-src
  • No implementado.
font-face-uri
  • No implementado.
font-face-format
  • No implementado.
font-face-name
  • No implementado.
definition-src
  • No implementado.
Módulo Extensibilidad
foreignObject
  • Implementado, but not built.
+{{ languages( { "en": "en/SVG_in_Firefox", "fr": "fr/SVG_dans_Firefox", "ja": "ja/SVG_in_Firefox", "pl": "pl/SVG_w_Firefoksie" } ) }} diff --git a/files/es/web/svg/tutorial/getting_started/index.html b/files/es/web/svg/tutorial/getting_started/index.html new file mode 100644 index 0000000000..c4a332ed02 --- /dev/null +++ b/files/es/web/svg/tutorial/getting_started/index.html @@ -0,0 +1,96 @@ +--- +title: Getting Started +slug: Web/SVG/Tutorial/Getting_Started +translation_of: Web/SVG/Tutorial/Getting_Started +--- +

{{ PreviousNext("SVG/Tutorial/Introduction", "SVG/Tutorial/Positions") }}

+ +

Un Ejemplo Simple

+ +

Permitanos introducirlo con un sencillo ejemplo. Mire el siguiente codigo :

+ +
<svg version="1.1"
+     baseProfile="full"
+     width="300" height="200"
+     xmlns="http://www.w3.org/2000/svg">
+
+  <rect width="100%" height="100%" fill="red" />
+
+  <circle cx="150" cy="100" r="80" fill="green" />
+
+  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
+
+</svg>
+
+ +

Copie el código y guárdelo como demo1.svg. Luego ábralo en Firefox. Lo verá como se ve en la siguiente figura. (usuarios Firefox : click aqui)

+ +

svgdemo1.png

+ +

El proceso de renderizado incluye lo siguiente :

+ +
    +
  1. Comenzamos con el elemento raiz del svg: + +
      +
    • La declaracion de tipo de documento (doctype) usual en  (X)HTML debería dejarse de lado debido a que la  validación DTD based SVG conduce a mas problemas que soluciones.
      • +
    • En cambio,  los atributos version y baseProfile deberian ser usados siempre para identificar la version de SVG para otro tipo de validaciones.
      • +
    • Debido a SVG es una especie de dialecto de XML, SVG debe unir siempre los namespaces correctamente (en el atributo xmlns). Para mayor información, vea  Namespaces Crash Course.
      • +
    +
    2. +
  2. El fondo esta puesto en rojo dibujando un rectangulo <rect/> que cubre el area de la imagen.
    3. +
  3. Un circulo verde <circle/> con un radio de 80px y se dibuja en el centro del rectangulo rojo(offset 30+120px inward, and 50+50px upward).
    4. +
  4. El texto "SVG" esta dibujado. El interior de cada letra esta relleno con blanco. +
    +
    El texto se coloca mediante el establecimiento de un ancla en donde queremos que el punto medio sea: en este caso, el punto medio debe corresponder al centro del circulo verde. Los ajustes finos se pueden hacer con el tamaño de la fuente y la posición vertical para garantizar que el resultado final sea estéticamente agradable.
    +
    +
    5. +
+ +

Basic properties of SVG files

+ +
    +
  • The first important thing to notice is the order of rendering of elements. The globally valid rule for SVG files is, that later elements are rendered atop previous elements. The further down an element is the more will be visible.
    • +
  • SVG files on the web can be displayed directly in the browser or embedded in HTML files via several methods: +
      +
    • If the HTML is XHTML and is delivered as type application/xhtml+xml, the SVG can be directly embedded in the XML source.
      • +
    • If the HTML is HTML5, and the browser is a conforming HTML5 browser, the SVG can be directly embedded, too. However, there may be syntax changes necessary to conform to the HTML5 specification
      • +
    • The SVG file can be referenced with an object element: + 
              <object data="image.svg" type="image/svg+xml" />
      +
      • +
    • Likewise an iframe element can be used: + 
              <iframe src="image.svg"></iframe>
      +
      • +
    • An img element can be used theoretically, too. However this technique doesn't work in Firefox before 4.0.
      • +
    • Finally SVG can be created dynamically with JavaScript and injected into the HTML DOM. This has the advantage, that replacement technologies for browsers, that can't process SVG, can be implemented.
      • +
    + See this dedicated article for an in-depth dealing with the topic.
    • +
  • How SVG handles sizes and units will be explained on the next page.
    • +
+ +

SVG File Types

+ +

SVG files come in two flavors. Normal SVG files are simple text files containing SVG markup. The recommended filename extension for these files is ".svg" (all lowercase).

+ +

Due to the potentially massive size SVG files can reach when used for some applications (e.g., geographical applications), the SVG specification also allows for gzip-compressed SVG files. The recommended filename extension for these files is ".svgz" (all lowercase). Unfortunately it is very problematic to get gzip-compressed SVG files to work reliably across all SVG capable user agents when served from Microsofts IIS server, and Firefox can not load gzip-compressed SVG from the local computer. Avoid gzip-compressed SVG except when you are publishing to a webserver that you know will serve it correctly (see below).

+ +

A Word on Webservers

+ +

Now that you have an idea of how to create basic SVG files, the next stage is to upload them to a Webserver. There are some gotchas at this stage though. For normal SVG files, servers should send the HTTP header:

+ +
Content-Type: image/svg+xml
+
+ +

For gzip-compressed SVG files, servers should send the HTTP headers:

+ +
Content-Type: image/svg+xml
+Content-Encoding: gzip
+
+ +

You can check that your server is sending the correct HTTP headers with your SVG files by using a site such as web-sniffer.net. Submit the URL of one of your SVG files and look at the HTTP response headers. If you find that your server is not sending the headers with the values given above, then you should contact your Web host. If you have problems convincing them to correctly configure their servers for SVG, there may be ways to do it yourself. See the server configuration page on the SVG wiki for a range of simple solutions.

+ +

Server misconfiguration is a very common reason for SVG failing to load, so make sure you check yours. If your server is not configured to send the correct headers with the SVG files it serves, then Firefox will most likely show the markup of the files as text or encoded garbage, or even ask the viewer to choose an application to open them.

+ +

{{ PreviousNext("SVG/Tutorial/Introduction", "SVG/Tutorial/Positions") }}

+ +

{{ languages( { "fr": "fr/SVG/Tutoriel/Premiers_pas", "ja": "ja/SVG/Tutorial/Getting_Started" } ) }}

diff --git a/files/es/web/svg/tutorial/index.html b/files/es/web/svg/tutorial/index.html new file mode 100644 index 0000000000..e1a2b9a408 --- /dev/null +++ b/files/es/web/svg/tutorial/index.html @@ -0,0 +1,57 @@ +--- +title: Tutorial de SVG +slug: Web/SVG/Tutorial +tags: + - Intermedio + - NeedsTranslation + - NesecitaActualizacion + - NesecitaAyuda + - NesecitaContenido + - SVG + - TopicStub + - Tutorial de SVG +translation_of: Web/SVG/Tutorial +--- +

Los graficos de vectores escalables, SVG , es un dialecto XML de W#C usado para describir graficos. Esta parcialente implementado en Firefox, Opera, WebKit , Internet Explorer y otros.

+ +

Este tutorial intenta explicar SVG a profundidad y esta elaborado con detalles tecnicos. Si quieres dibujar hermosas imagenes, podras encontrar recursos mas utiles en la Documentacion de Inkscape . Otra buena introduccion es brindada por el W3C's SVG Primer . 

+ +
Presentando SVG desde cero
+ + + +

Los siguientes temas son más avanzados, por lo tanto deben tener sus propios tutoriales.

+ +
Scripting SVG con JavaScript
+ +

TBD

+ +
Tutorial filtros SVG
+ +

TBD

+ +
Animaciones con SMIL en SVG
+ +

TBD

+ +
Creación de fuentes en SVG
+ +

TBD

diff --git "a/files/es/web/svg/tutorial/introducci\303\263n/index.html" "b/files/es/web/svg/tutorial/introducci\303\263n/index.html" new file mode 100644 index 0000000000..759ef2dbf9 --- /dev/null +++ "b/files/es/web/svg/tutorial/introducci\303\263n/index.html" @@ -0,0 +1,45 @@ +--- +title: Introducción +slug: Web/SVG/Tutorial/Introducción +translation_of: Web/SVG/Tutorial/Introduction +--- +

{{ PreviousNext("Web/SVG/Tutorial", "Web/SVG/Tutorial/Getting_Started") }}

+ +

Ejemplo de imagenes vectoriales, una cría de leon, una curva con flechas direccionales a intervalos regulares y un texto que sigue una trayectoria onduladaSVG es un lenguaje XML, parecido a XHTML, el cual puede ser usado para dibujar gráficos vectoriales, como los mostrados a la derecha. Puede ser usado para crear una imagen ya sea especificando todas las líneas y formas necesarias, modificando las imágenes matriciales (raster images) o una combinación de ambas. La imagen y sus componentes pueden ser transformados, compuestos o filtrados para cambiar completamente su apariencia.

+ +

SVG surgió en 1999 después de que varios formatos compitieran y fueran propuestos a la W3C los cuales fallaron para ser completamente ratificados. SVG es soportado por los principales navegadores. Un inconveniente es que cargar un SVG puede ser lento. SVG ofrecen beneficios, algunos de los cuales incluyen tener una interfaz DOM disponible para éste, y no requerir extensiones de terceros. Usarlo o no a menudo dependerá de tu caso específico de uso.

+ +

 

+ +

 

+ +

Ingredientes básicos

+ +

HTML  provee elementos que definen encabezados, párrafos, tablas, etc. En forma muy similar, SVG provee elementos para círculos, rectángulos, y curvas simples y complejas. Un documento SVG simple consiste de nada más que el elemento raíz {{ SVGElement('svg') }} y varias formas básicas que construyen todas juntas un gráfico. En adición está el elemento {{ SVGElement('g') }}, el cual es usado para agrupar varias formas básicas.

+ +

Desde este punto, la imagen SVG puede volverse arbitrariamente compleja. SVG soporta gradientes, rotaciones, efectos de filtro, animaciones, interactividad con JavaScript y más. Pero todas esas características adicionales del lenguaje dependen de este conjunto relativamente pequeño de elementos para definir el area de gráficos.

+ +

Antes de empezar

+ +

Existe un número de programas de dibujo disponibles como Inkscape los cuales son gratis y usan SVG como su formato nativo. Sin embargo, este tutorial se basará en el confiable XML o editor de texto (a tu criterio). La idea es enseñar el funcionamiento interno de SVG a aquellos que desean comprenderlo, y eso se logra mejor ensuciando tus manos con un poco de maquetado. De todos modos deberías fijarte tus objetivos. No todos los visores de SVG son iguales por lo que es posible que algo escrito para una aplicación no se verá exactamente igual en otra, simplemente porque soportan diferentes niveles de la especificación SVG u otra especificación que estés utilizando junto con SVG (es decir, JavaScript o CSS).

+ +

SVG es soportado en todo navegador moderno e incluso hasta un par de versiones anteriores en algunos casos. Una tabla bastante completa de soporte por navegadores puede verse en Can I use. Firefox ha soportado algo de contenido SVG desde su versión 1.5 y el nivel de soporte ha ido creciendo con cada versión desde entonces. Con algo de optimismo, junto con este tutorial, MDN puede ayudar a los desarrolladores a estar al tanto de las diferencias entre Gecko y algunas de las otras implementaciones mas importantes.

+ +

Antes de empezar deberías tener conceptos básicos de XML u otro lenguaje de maquetado como HTML. Si no estás del todo familiarizado con XML, aquí hay algunas máximas a tener presentes:

+ +
    +
  • Los elementos SVG y sus atributos deben ser escritos en la misma capitalización mostrada ya que XML es sensible a mayúsculas (en contraposición a HTML).
    • +
  • Los valores de atributos en SVG deben ir entre comillas, incluso si son números.
    • +
+ +

SVG es una especificación muy extensa. Este instructivo intenta cubrir lo básico. Una vez que te hayas familiarizado deberías ser capaz de usar la Referencia de elementos y la Referencia de interface para encontrar cualquier otra cosa que necesites saber.

+ +

SVG y sus sabores

+ +

Desde que se volvió una recomendación en 2003, la versión "completa" mas reciente de SVG es 1.1. Se edifica sobre SVG 1.0, añadiendo mas modularización para facilitar su implementación. La segunda edición de SVG 1.1 se volvió una Recomendación en 2011. SVG 1.2 iba a ser la próxima entrega de SVG. Fue descartada en favor de la próxima SVG 2.0, la cual está siendo desarrollada ahora mismo y sigue un enfoque similar a CSS 3 en que divide componentes en varias especificaciones vagamente relacionadas.

+ +

En adición a la recomendación de SVG completo, el grupo de trabajo en W3C introdujo SVG Tiny y SVG Basic en 2003. Estos perfiles apuntan principalmente a dispositivos móviles. El primero, SVG Tiny, debería brindar primitivas de gráficos para dispositivos pequeños con capacidades bajas. SVG Basic ofrece muchas de las prestaciones del SVG completo, pero no incluye aquellas difíciles de implementar o costosas de representar (como animaciones). En 2008, SVG Tiny 1.2 se volvió una Recomendación W3C.

+ +

Hubo planes para una especificación SVG Print, la cual habría agregado soporte para páginas múltiples y administración de color mejorada. Esta tarea fue abandonada.

+ +

{{ PreviousNext("Web/SVG/Tutorial", "Web/SVG/Tutorial/Getting_Started") }}

diff --git a/files/es/web/svg/tutorial/svg_in_html_introduction/index.html b/files/es/web/svg/tutorial/svg_in_html_introduction/index.html new file mode 100644 index 0000000000..ff4bede205 --- /dev/null +++ b/files/es/web/svg/tutorial/svg_in_html_introduction/index.html @@ -0,0 +1,95 @@ +--- +title: SVG In HTML Introduction +slug: Web/SVG/Tutorial/SVG_In_HTML_Introduction +translation_of: Web/SVG/Tutorial/SVG_In_HTML_Introduction +--- +

Overview

+ +

This article and its associated example shows how to use inline SVG to provide a background picture for a form. It shows how JavaScript and CSS can be used to manipulate the picture in the same way you would script regular XHTML. Note that the example will only work in browsers that support XHTML (not HTML) and SVG integration.

+ +

Source

+ +

Here is the source to the example:

+ +
<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>XTech SVG Demo</title>
+<style>
+  stop.begin { stop-color:yellow; }
+  stop.end { stop-color:green; }
+  body.invalid stop.end { stop-color:red; }
+  #err { display:none; }
+  body.invalid #err { display:inline; }
+</style>
+<script>
+  function signalError() {
+    document.getElementById('body').setAttribute("class", "invalid");
+  }
+</script>
+</head>
+<body id="body"
+  style="position:absolute; z-index:0; border:1px solid black; left:5%; top:5%; width:90%; height:90%;">
+<form>
+  <fieldset>
+    <legend>HTML Form</legend>
+    <p><label>Enter something:</label>
+    <input type="text"/>
+    <span id="err">Incorrect value!</span></p>
+    <p><input type="button" value="Activate!" onclick="signalError();" /></p>
+  </fieldset>
+</form>
+
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+  viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice"
+  style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;">
+  <linearGradient id="gradient">
+    <stop class="begin" offset="0%"/>
+    <stop class="end" offset="100%"/>
+  </linearGradient>
+  <rect x="0" y="0" width="100" height="100" style="fill:url(#gradient)" />
+  <circle cx="50" cy="50" r="30" style="fill:url(#gradient)" />
+</svg>
+</body>
+</html>
+
+ +

Discussion

+ +

The page is mainly regular XHTML, CSS and JavaScript. The only interesting part is the <svg> element it contains. This element and its children are declared to be in the SVG namespace. The element contains a gradient and two shapes filled with the gradient. The gradient color stops have their colors set by CSS. When the user enters something incorrect into the form, the script sets the invalid attribute on the <body>, and a style rule changes the gradient end-stop color to red. (Another style rule makes an error message appear.)

+ +

This approach has the following points in its favor:

+ +
    +
  • We have taken a regular XHTML form that could have been part of an existing Web site, and added an attractive, interactive background
    • +
  • The approach is backwards compatible to browsers that do not support SVG; simply, no background appears in them
    • +
  • It's very simple and performs very well
    • +
  • The picture dynamically sizes itself to the required size in an intelligent way
    • +
  • We can have declarative style rules applying to both HTML and SVG
    • +
  • The same script manipulates both HTML and SVG
    • +
  • The document is entirely standards-based
    • +
+ +
+

To add a linked image with DOM methods to an embedded SVG element, one has to use setAttributeNS to set href. Like in the following example:

+ +
 var img = document.createElementNS("http://www.w3.org/2000/svg", "image");
+img.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "move.png");
+
+
+
+
+ +

Details

+ +

The viewBox attribute establishes a logical coordinate system which the SVG picture's coordinates are relative to. In this case our picture is laid out in a 100 by 100 viewport.

+ +

The preserveAspectRatio attribute specifies that the aspect ratio must be preserved by centering the picture in the available size, sizing to the maximum of the height or width and then cutting off any overflow.

+ +

The style attribute pins the SVG element to the background of the form.

+ + + +
    +
  • Another SVG in XHTML example: A swarm of motes
    • +
  • Working example that works in both Mozilla and in Internet Explorer with Adobe's SVG Viewer installed. (For inline SVG to work in both Firefox and Internet Explorer it is necessary to serve documents with a different Content-Type to each browser. For this reason, if you're behind a proxy server that caches the page, the example wont work in the second browser you load it in because it will receive the wrong Content-Type.)
    • +
diff --git a/files/es/web/svg/tutorial/tools_for_svg/index.html b/files/es/web/svg/tutorial/tools_for_svg/index.html new file mode 100644 index 0000000000..99c50f9aed --- /dev/null +++ b/files/es/web/svg/tutorial/tools_for_svg/index.html @@ -0,0 +1,74 @@ +--- +title: Tools for SVG +slug: Web/SVG/Tutorial/Tools_for_SVG +translation_of: Web/SVG/Tutorial/Tools_for_SVG +--- +

{{ PreviousNext("Web/SVG/Tutorial/SVG_Image_Tag") }}

+ +

 

+ +

Ahora que hemos cubierto los aspectos básicos de los componentes internos de SVG, analizaremos algunas herramientas para trabajar con archivos SVG.

+ +

Browser support

+ +

A partir de Internet Explorer 9, la mayoria de los navegadores soportan SVG: IE 9, Mozilla Firefox, Safari, Google Chrome y Opera. Los dispositivos mobiles que estan basado en los navegadores Webkit tambien soportan SVG. En dispositivos más antiguos o más pequeños, es probable que se admita SVG Tiny

+ +

Inkscape

+ +

URL: www.inkscape.org

+ +

Una de las herramientas más importantes para un formato de gráficos es un programa de dibujo decente. Inkscape ofrece dibujos vectoriales de última generación, y es de código abierto.

+ +

Además, utiliza SVG como su formato de archivo nativo. Para almacenar datos específicos de Inkscape, extiende el archivo SVG con elementos y atributos en un espacio de nombres personalizado, pero también puede optar por exportar como SVG simple.

+ +

Adobe Illustrator

+ +

URL: www.adobe.com/products/illustrator/

+ +

Before Adobe acquired Macromedia, it was the most prominent promoter of SVG. From this time stems the good support of SVG in Illustrator. However, the resulting SVG often shows some quirks, that make it necessary to post-process it for general applicability.

+ +

Apache Batik

+ +

URL: xmlgraphics.apache.org/batik/

+ +

Batik is a set of open source tools under the roof of the Apache Software Foundation. The toolkit is written in Java and offers almost complete SVG 1.1 support, as well as some features that were originally planned for SVG 1.2.

+ +

Batik offers a viewer (Squiggle), a rasterizer for PNG output, an SVG pretty printer to format SVG files, and a TrueType-to-SVG-Font converter.

+ +

Together with Apache FOP Batik can transform SVG to PDF.

+ +

Other renderers

+ +

Several projects exist that can create a raster image from an SVG source. ImageMagick is one of the most famous command-line image processing tools. The Gnome library rsvg is used by the Wikipedia to raster their SVG graphics. Usage of headless browsers such as SlimerJS and PhantomJS are also popular for this purpose, as the image produced is closer to what the SVG will look like in the browser.

+ +

Raphael JS

+ +

URL: raphaeljs.com

+ +

This is a JavaScript library, that acts as an abstraction layer between browser implementations. Notably older versions of Internet Explorer are supported by generating VML, a vector markup language, that is one of two ancestors of SVG and exists since IE 5.5.

+ +

Snap.svg

+ +

URL: snapsvg.io

+ +

A newer JavaScript abstraction layer from the same author of Raphael JS. Snap.svg is designed for modern browsers and therefore supports the newest SVG features like masking, clipping, patterns, full gradients, groups. It does not support the older browsers that Raphael does.

+ +
 
+ +

Google Docs

+ +

URL: www.google.com/google-d-s/drawings/

+ +

Drawings from Google Docs can be exported as SVG.

+ +

Science

+ +

The well-known plotting tools xfig and gnuplot both support exporting as SVG. To render graphs on the web JSXGraph supports VML, SVG and canvas, automatically deciding which technology to use based on browser capabilities.

+ +

In GIS (Geographic Information System) applications SVG is often used as both storage and rendering format. See carto.net for details.

+ +

More tools!

+ +

The W3C offers a list of programs that support SVG.

+ +

{{ PreviousNext("Web/SVG/Tutorial/SVG_Image_Tag") }}

-- cgit v1.2.3-54-g00ecf