« 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
- -| Categorias | -None | -
|---|---|
| Valor | -<transform-list> | -
| Animable | -Yes | -
| Documento normativo | -SVG 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: que mapea las coordinadas desde un nuevo sistema de coordenadas a un sistema existente mediante la siguiente matriz de igualdades:
- - translate(<x> [<y>]) -
- Esta definición de transformación, especifica la transición en
xey. Es equivalente a:matrix(1 0 0 1 x y). Si no se provee ningun valor dey, éste se asume como cero.
- - scale(<x> [<y>]) -
- Esta definición de transformación, especifica la escala de operación en
xey. Es equivalente a:matrix(x 0 0 y 0 0). Si no se provee ningun valor dey, éste se asume igual ax.
- - rotate(<a> [<x> <y>]) -
- Esta definición de transformación, especifica la rotación en
agrados a partir del punto dado. Si los parámetros opcionalesxeyno 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: Si se proveen los parámetros opcionalesxey, 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
adegrees. The operation corresponds to the matrix
- - -
- skewY(<a>) -
- This transform definition specifies a skew transformation along the y axis by
adegrees. The operation corresponds to the matrix
-
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:
-
-
- {{ SVGElement("a") }} -
- {{ SVGElement("clipPath") }} -
- {{ SVGElement("defs") }} -
- {{ SVGElement("foreignObject") }} -
- {{ SVGElement("g") }} -
- {{ SVGElement("switch") }} -
- {{ SVGElement("use") }} -
- {{ SVGElement("svg") }} (SVG 2 onwards) -
- Graphics elements » -
{{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.
- -
-
-
-
-
-
-@namespace svgns url(http://www.w3.org/2000/svg);
-html,body,svg { height:100% }
-<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"> - <circle> - </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
POSTcon el cuerpoPINGserá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ón | -Estado | -Comentatio | -
|---|---|---|
| {{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/a/index.md b/files/es/web/svg/element/a/index.md new file mode 100644 index 00000000000000..827217c825c7e0 --- /dev/null +++ b/files/es/web/svg/element/a/index.md @@ -0,0 +1,120 @@ +--- +title: +slug: Web/SVG/Element/a +translation_of: Web/SVG/Element/a +--- +{{SVGRef}} + +El elemento SVG \ 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 \ 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. + +## Ejemplo + +```css hidden +@namespace svgns url(http://www.w3.org/2000/svg); +html,body,svg { height:100% } +``` + +```html + +``` + +```css +/* 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)}} + +> **Advertencia:** Puesto que este elemento comparte su nombre de etiqueta con el [elemento ``de HTML](/es/docs/Web/HTML/Element/a), la selección de "`a`" con CSS o [`querySelector`](/es/docs/Web/API/Document/querySelector) puede aplicarse al tipo incorrecto de elemento. Pruebe [la regla `@namespace`](/es/docs/Web/CSS/@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_: **\{{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
- --
-
- Conditional processing attributes » -
- Core attributes » -
- Animation event attributes » -
- Xlink attributes » -
- Animation attribute target attributes » -
- Animation timing attributes » -
- Animation value attributes » -
- Animation addition attributes » -
- {{SVGAttr("externalResourcesRequired")}} -
Atributos específicos
- --
-
- {{SVGAttr("attributeName")}} -
- {{SVGAttr("attributeType")}} -
- {{SVGAttr("from")}} -
- {{SVGAttr("to")}} -
- {{SVGAttr("dur")}} -
- {{SVGAttr("repeatCount")}} -
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):
- --
-
- Designing Safer Web Animation For Motion Sensitivity · An A List Apart Article -
- An Introduction to the Reduced Motion Media Query | CSS-Tricks -
- Responsive Design for Motion | WebKit -
- MDN Understanding WCAG, Guideline 2.2 explanations -
- Understanding Success Criterion 2.2.2 | W3C Understanding WCAG 2.0 -
Especificaciones
- -| Specification | -Status | -Comment | -
|---|---|---|
| {{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
- -
-
-
-
diff --git a/files/es/web/svg/element/animate/index.md b/files/es/web/svg/element/animate/index.md
new file mode 100644
index 00000000000000..56c03b000206d8
--- /dev/null
+++ b/files/es/web/svg/element/animate/index.md
@@ -0,0 +1,82 @@
+---
+title: {{Compat("svg.elements.animate")}}
-{{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>- - - -
Atributos
- -Atributos globales
- --
-
- Atributos de procesamiento condicional » -
- Atributos principales » -
- Atributos de eventos gráficos » -
- Atributos de presentación » -
- {{ SVGAttr("class") }} -
- {{ SVGAttr("style") }} -
- {{ SVGAttr("externalResourcesRequired") }} -
- {{ SVGAttr("transform") }} -
Atributos específicos
- --
-
- {{ SVGAttr("cx") }} -
- {{ SVGAttr("cy") }} -
- {{ SVGAttr("r") }} -
Interfaz DOM
- -Este elemento implementa la interfaz {{ domxref("SVGCircleElement") }}.
- -Compatibilidad de navegadores
- -{{Compat("svg.elements.circle")}} - -Relacionado
- --
-
- {{ SVGElement("ellipse") }} -
{{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
- --
-
- Conditional processing attributes » -
- Core attributes » -
- Graphical event attributes » -
- Presentation attributes » -
- {{SVGAttr("class")}} -
- {{SVGAttr("style")}} -
- {{SVGAttr("externalResourcesRequired")}} -
- {{SVGAttr("transform")}} -
Atributos Específicos
- -No hay atributos específicos
- -Interfaz DOM
- -Este elemento implementa la interfaz SVGGElement.
Compatibilidad con navegadores
- -{{Compat("svg.elements.g")}} diff --git a/files/es/web/svg/element/g/index.md b/files/es/web/svg/element/g/index.md new file mode 100644 index 00000000000000..e2b5e21266d6c5 --- /dev/null +++ b/files/es/web/svg/element/g/index.md @@ -0,0 +1,57 @@ +--- +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 + +```html + +``` + +{{EmbedLiveSample("Ejemplo",220,130)}} + +## Atributos + +### Atributos globales + +- [Conditional processing attributes](/es/docs/SVG/Attribute#ConditionalProccessing "SVG/Attribute#ConditionalProccessing") » +- [Core attributes](/es/docs/SVG/Attribute#Core "SVG/Attribute#Core") » +- [Graphical event attributes](/es/docs/SVG/Attribute#GraphicalEvent "SVG/Attribute#GraphicalEvent") » +- [Presentation attributes](/es/docs/SVG/Attribute#Presentation "SVG/Attribute#Presentation") » +- {{SVGAttr("class")}} +- {{SVGAttr("style")}} +- {{SVGAttr("externalResourcesRequired")}} +- {{SVGAttr("transform")}} + +### Atributos Específicos + +_No hay atributos específicos_ + +## Interfaz DOM + +Este elemento implementa la interfaz [`SVGGElement`](/en-US/docs/DOM/SVGGElement "DOM/SVGGElement"). + +## Compatibilidad con navegadores + +{{Compat("svg.elements.g")}} diff --git a/files/es/web/svg/element/glyph/index.html b/files/es/web/svg/element/glyph/index.html deleted file mode 100644 index 81ece6035083fa..00000000000000 --- a/files/es/web/svg/element/glyph/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: glyph -slug: Web/SVG/Element/glyph -tags: - - Contenido de texto SVG - - Elemento - - Fuentes SVG - - Glifos - - NeedsCompatTable - - Referencia - - SVG -translation_of: Web/SVG/Element/glyph -original_slug: Web/SVG/Element/glifo ---- -{{SVGRef}}
-
-Un glifo define a un glifo en particular en una fuente SVG.
- -Contexto de uso
- -| Categories | -Elemento de contenido de texto. | -
|---|---|
| Permitted content | -
- Cualquier número de los siguientes elementos, en cualquier orden: |
-
| Normative document | -SVG 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 centrales» -
- Atributos de presentación » -
- {{ SVGAttr("class") }} -
- {{ SVGAttr("style") }} -
Atributos específicos
- --
-
- {{ SVGAttr("d") }} -
- {{ SVGAttr("horiz-adv-x") }} -
- {{ SVGAttr("vert-origin-x") }} -
- {{ SVGAttr("vert-origin-y") }} -
- {{ SVGAttr("vert-adv-y") }} -
- {{ SVGAttr("unicode") }} -
- {{ SVGAttr("glyph-name") }} -
- {{ SVGAttr("orientation") }} -
- {{ SVGAttr("arabic-form") }} -
- {{ SVGAttr("lang") }} -
Interfaz DOM
- -Este elemento implementa la interfaz SVGGlyphElement.
Relacionado
- --
-
- {{ SVGElement("font") }} -
- {{ SVGElement("missing-glyph") }} -
- Tutorial SVG: Fuentes SVG -
« 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/index.md b/files/es/web/svg/element/index.md new file mode 100644 index 00000000000000..98ebb56c42b35c --- /dev/null +++ b/files/es/web/svg/element/index.md @@ -0,0 +1,254 @@ +--- +title: Referencia de Elementos SVG +slug: Web/SVG/Element +tags: + - NeedsTranslation + - SVG + - SVG Reference + - TopicStub +translation_of: Web/SVG/Element +--- +« [SVG](/es/docs/SVG "SVG") / [SVG Attribute reference](/es/docs/SVG/Attribute "SVG/Attribute") » + +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 + +- [SVG attribute reference](/es/docs/Web/SVG/Attribute) +- [SVG Tutorial](/es/docs/Web/SVG/Tutorial) +- [SVG interface reference](/es/docs/Web/API/Document_Object_Model#SVG_interfaces) + +{{SVGRef}} diff --git a/files/es/web/svg/element/rect/index.html b/files/es/web/svg/element/rect/index.html deleted file mode 100644 index a7a22c2836e13a..00000000000000 --- a/files/es/web/svg/element/rect/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -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 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>- - - -
Atributos
- -Atributos globales
- --
-
- Conditional processing attributes » -
- Core attributes » -
- Graphical event attributes » -
- Presentation attributes » -
- {{ SVGAttr("class") }} -
- {{ SVGAttr("style") }} -
- {{ SVGAttr("externalResourcesRequired") }} -
- {{ SVGAttr("transform") }} -
Atributos específicos
- --
-
- {{ SVGAttr("x") }} -
- {{ SVGAttr("y") }} -
- {{ SVGAttr("width") }} -
- {{ SVGAttr("height") }} -
- {{ SVGAttr("rx") }} -
- {{ SVGAttr("ry") }} -
Interfaz DOM
- -Este elemento implementa la interfaz SVGRectElement.
Compatibilidad de los Navegadores
- -{{Compat("svg.elements.rect")}} - -Ver también
- --
-
- {{ SVGElement("path") }} -
{{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
- --
-
- Core attributes » -
Atributos específicos
- --
-
- {{ SVGAttr("type") }} -
- {{ SVGAttr("media") }} -
- {{ SVGAttr("title") }} -
DOM Interface
- -Este elemento implementa la interfaz SVGStyleElement.
Browser compatibility
- -{{Compat("svg.elements.style")}} - -See also
- - diff --git a/files/es/web/svg/element/style/index.md b/files/es/web/svg/element/style/index.md new file mode 100644 index 00000000000000..bdea6e0fc9549e --- /dev/null +++ b/files/es/web/svg/element/style/index.md @@ -0,0 +1,59 @@ +--- +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 + +```html + +``` + +Live result: + +{{EmbedLiveSample("Ejemplo",150,165)}} + +## Atributos + +### Atributos globales + +- [Core attributes](/en/SVG/Attribute#Core "en/SVG/Attribute#Core") » + +### Atributos específicos + +- {{ SVGAttr("type") }} +- {{ SVGAttr("media") }} +- {{ SVGAttr("title") }} + +## DOM Interface + +Este elemento implementa la interfaz [`SVGStyleElement`](/en/DOM/SVGStyleElement "en/DOM/SVGStyleElement"). + +## Browser compatibility + +{{Compat("svg.elements.style")}} + +## See also + +- [\ +{{ 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)
- -
El proceso de renderizado incluye lo siguiente :
- --
-
- 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
versionybaseProfiledeberian 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. -
- - El fondo esta puesto en rojo dibujando un rectangulo
<rect/>que cubre el area de la imagen.
- - 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).
- - 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.-
-
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
objectelement: -<object data="image.svg" type="image/svg+xml" />
-
- - Likewise an
iframeelement can be used: -<iframe src="image.svg"></iframe>
-
- - An
imgelement 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. -
- - If the HTML is XHTML and is delivered as type
- 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/getting_started/index.md b/files/es/web/svg/tutorial/getting_started/index.md new file mode 100644 index 00000000000000..0827c522bdf15a --- /dev/null +++ b/files/es/web/svg/tutorial/getting_started/index.md @@ -0,0 +1,86 @@ +--- +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 : + +```xml + +``` + +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](https://developer.mozilla.org/@api/deki/files/4571/=svgdemo1.xml)) + + + +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](/es/docs/Web/SVG/Namespaces_Crash_Course "en/SVG/Namespaces_Crash_Course"). + +2. El fondo esta puesto en rojo dibujando un rectangulo [`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
- --
-
- Introducción -
- Comenzando -
- Posiciones -
- Figuras básicas -
- Paths -
- Rellenos y trazos -
- Gradientes -
- Patrones -
- Textos -
- Transformaciones básicas -
- Recortes y máscaras -
- Otros contenidos en SVG -
- Filtros y efectos -
- Fuentes SVG -
- Etiquetas de imágenes SVG -
- Herramientas de SVG -
- Otros tutoriales -
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/index.md b/files/es/web/svg/tutorial/index.md new file mode 100644 index 00000000000000..6c659d1b94055e --- /dev/null +++ b/files/es/web/svg/tutorial/index.md @@ -0,0 +1,55 @@ +--- +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](https://inkscape.org/en/learn/) . Otra buena introduccion es brindada por el W3C's [SVG Primer](http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html) . + +##### Presentando SVG desde cero + +- [Introducción](/en-US/SVG/Tutorial/Introduction "en-US/SVG/Tutorial/Introduction") +- [Comenzando](/en-US/SVG/Tutorial/Getting_Started "en-US/SVG/Tutorial/Getting_Started") +- [Posiciones](/en-US/SVG/Tutorial/Positions "en-US/SVG/Tutorial/Positions") +- [Figuras básicas](/en-US/SVG/Tutorial/Basic_Shapes "en-US/SVG/Tutorial/Basic_Shapes") +- [Paths](/en-US/SVG/Tutorial/Paths "en-US/SVG/Tutorial/Paths") +- [Rellenos y trazos](/en-US/SVG/Tutorial/Fills_and_Strokes "en-US/SVG/Tutorial/Fills_and_Strokes") +- [Gradientes](/en-US/SVG/Tutorial/Gradients "en-US/SVG/Tutorial/Gradients") +- [Patrones](/en-US/SVG/Tutorial/Patterns "en-US/SVG/Tutorial/Patterns") +- [Textos](/en-US/SVG/Tutorial/Texts "en-US/SVG/Tutorial/Texts") +- [Transformaciones básicas](/en-US/SVG/Tutorial/Basic_Transformations "en-US/SVG/Tutorial/Basic_Transformations") +- [Recortes y máscaras](/en-US/SVG/Tutorial/Clipping_and_masking "en-US/SVG/Tutorial/Clipping_and_masking") +- [Otros contenidos en SVG](/en-US/SVG/Tutorial/Other_content_in_SVG "en-US/SVG/Tutorial/Other content in SVG") +- [Filtros y efectos](/en-US/SVG/Tutorial/Filter_effects "en-US/SVG/Tutorial/Filter effects") +- [Fuentes SVG](/en-US/SVG/Tutorial/SVG_fonts "en-US/SVG/Tutorial/SVG fonts") +- [Etiquetas de imágenes SVG](/en-US/SVG/Tutorial/SVG_Image_Tag "en-US/SVG/Tutorial/SVG Image Tag") +- [Herramientas de SVG](/en-US/SVG/Tutorial/Tools_for_SVG "en-US/SVG/Tutorial/Tools_for_SVG") +- [Otros tutoriales](/es/docs/Web/SVG/Tutorial/Other_content_in_SVG "en-US/SVG/Tutorial/Other_Tutorials") + +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/introduction/index.html b/files/es/web/svg/tutorial/introduction/index.html deleted file mode 100644 index 603eb30d462e41..00000000000000 --- a/files/es/web/svg/tutorial/introduction/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: Introducción -slug: Web/SVG/Tutorial/Introduction -translation_of: Web/SVG/Tutorial/Introduction -original_slug: Web/SVG/Tutorial/Introducción ---- -{{ PreviousNext("Web/SVG/Tutorial", "Web/SVG/Tutorial/Getting_Started") }}
- -
SVG 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/introduction/index.md b/files/es/web/svg/tutorial/introduction/index.md new file mode 100644 index 00000000000000..4ea85333b195be --- /dev/null +++ b/files/es/web/svg/tutorial/introduction/index.md @@ -0,0 +1,40 @@ +--- +title: Introducción +slug: Web/SVG/Tutorial/Introduction +translation_of: Web/SVG/Tutorial/Introduction +original_slug: Web/SVG/Tutorial/Introducción +--- +{{ PreviousNext("Web/SVG/Tutorial", "Web/SVG/Tutorial/Getting_Started") }} + +[SVG](/es/docs/Web/SVG "es/docs/Web/SVG") es un lenguaje [XML](/es/docs/Introducción_a_XML "es/docs/Introducción_a_XML"), parecido a [XHTML](/es/docs/XHTML "es/docs/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](http://www.w3.org "en-US/W3C") los cuales fallaron para ser completamente ratificados. SVG es soportado por los principales [navegadores](https://caniuse.com/#search=svg). Un inconveniente es que cargar un SVG puede ser lento. SVG ofrecen beneficios, algunos de los cuales incluyen tener una [interfaz](/es/docs/Web/API) [DOM ](/es/docs/Web/API)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](/es/docs/Web/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](http://www.inkscape.org/) 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](/es/JavaScript "es/JavaScript") o [CSS](/es/CSS "es/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](http://caniuse.com/svg). 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](/es/docs/Web/SVG/Element "es/docs/Web/SVG/Element") y la [Referencia de interface](/es/docs/DOM/DOM_Reference#SVG_interfaces "es/SVG/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](http://www.w3.org/TR/SVG/) 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](http://www.w3.org/TR/SVG2/), 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/tools_for_svg/index.html b/files/es/web/svg/tutorial/tools_for_svg/index.html deleted file mode 100644 index c7eab5d101e4ad..00000000000000 --- a/files/es/web/svg/tutorial/tools_for_svg/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -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") }}
diff --git a/files/es/web/svg/tutorial/tools_for_svg/index.md b/files/es/web/svg/tutorial/tools_for_svg/index.md new file mode 100644 index 00000000000000..f5b31999f8fb75 --- /dev/null +++ b/files/es/web/svg/tutorial/tools_for_svg/index.md @@ -0,0 +1,70 @@ +--- +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](http://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/](http://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/](http://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](http://xmlgraphics.apache.org/fop/) Batik can transform SVG to PDF. + +### Other renderers + +Several projects exist that can create a raster image from an SVG source. [ImageMagick](http://ImageMagick.org) is one of the most famous command-line image processing tools. The Gnome library [rsvg](http://library.gnome.org/devel/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](http://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](http://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/](http://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](http://jsxgraph.uni-bayreuth.de/wp/) 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](http://carto.net) for details. + +## More tools! + +The W3C offers a [list of programs](http://www.w3.org/Graphics/SVG/WG/wiki/Implementations) that support SVG. + +{{ PreviousNext("Web/SVG/Tutorial/SVG_Image_Tag") }}