caption: Uso de SVG's created: 20131028132700000 es-title: Uso de imágenes SVG modified: 20160503054238164 tags: Features title: UsingSVG type: text/vnd.tiddlywiki ~Tiddlywiki permite el uso de imágenes SVG de dos maneras: * Los tiddlers de tipo `image/svg+xml` se interpretan como imágenes SVG, es decir que se muestran como elementos `` con el SVG incrustado en el atributo `src`. ** Como ejemplos de imagen SVG, véanse [[Motovun Jack.svg]] y [[Tiddler Fishes.svg]] * También pueden incluirse elementos SVG directamente con WikiText. ! Transclusión de tiddlers SVG Se pueden incrustar SVG's mediante transclusión ``` {{Motovun Jack.jpg}} ``` ! Incrustación de elementos SVG La otra forma de usar un SVG es incrustándolo directamente. Al incrustar un SVG en el texto como elemento ``, este permanece en un entorno restringido y contenido. No puede, por ejemplo, usar los estilos CSS del documento padre, por ejemplo, ni se puede hacer una transclusión aislada del SVG. También puede incluirse el `` directamente. Este es el código... ``` ``` ...y este el resultado: Para hacerlo, no necesitamos la directiva ``. ! Inclusión de contenido HTML o ~WikiText en imágenes SVG Se pueden incluir sencillas cadenas de texto en un SVG mediante el elemento `` Este es el código... ``` Hello, out there ``` ...y este el resultado Hello, out there Se puede incluir HTML o ~WikiText <<.def dentro>> de imágenes SVG incrustadas en el texto mediante el elemento ``. Por ejemplo: ``` Esto es un poco de texto que incluye un [[enlace a otro tiddler|HelloThere]]. ``` Esto es un poco de texto que incluye un [[enlace a otro tiddler|HelloThere]]. !! Incrustación y transclusión combinadas Al definiri elementos SVG podemos jugar con algunos de sus parámetros mediante transclusión. Como ejemplo, veamos el caso de este círculo SVG que podemos modificar mediante transclusión del valor de su radio desde el tiddler [[$:/SVGExampleRadius]]: Este es el código... ``` ``` ...y este el resultado: Podemos variar el radio del círculo (como podríamos variar cualquier otro parámetro con la misma técnica) editando el siguiente valor, alojado en otro tiddler: <$edit-text tiddler="$:/SVGExampleRadius" tag="input"/> ! Texto curvo en SVG's {{Making curved text with SVG}}