Una etiqueta que verás contínuamente en SVG es defs. Es crucial que se entienda cuándo usar el elemento defs en SVG ya que es como una alerta que le indica al parser XML que está a punto de definir algo. Al igual que cualquier otra etiqueta XML, defs debe tener una etiqueta de apertura y cierre en el código. La etiqueta defs es un contenedor que contiene otros elementos. Cuando colocamos otras etiquetas dentro defs, se está creando un conjunto identificable que puede ser usado una vez o varias veces. La etiqueta defs permite, por tanto, establecer una definición que no se mostrará hasta que se requiera. Se podría pensar en defs como un modelo. Se crea un único esquema que se puede utilizar para construir otras estructuras múltiples.
Viewbox es un atributo que se utiliza cuando creamos formas SVG. Si piensamos en un documento como un lienzo, el viewBox (o área de visión) es la parte del lienzo que deseamos que el espectador vea. A pesar de que la página puede cubrir la pantalla completa del equipo, la figura sólo puede existir dentro de esa área de visión que hemos definido. Viewbox indicar al parser que debe hacer un zoom sobre esa zona. Esto elimina el espacio en blanco extra. El atributo viewBox actúa como una lente que disminuye o aumenta el punto o la zona enfocada.
Cuando dibujamos en SVG se utilizan matrices matemáticas para averiguar en qué parte de la pantalla está el punto. Consideremos, por ejemplo, la posibilidad de un documento con un cuadro de tamaño de 200 por 200 píxeles, pero en una pantalla que es de 100 por 100 píxeles. El punto (20, 20) debería ser dibujado en (10, 10) en la pantalla para que llevase la misma escala. Esta transformación se produciría para cada punto. Bien, pues el visor SVG funciona de igual manera, haciendo este uso de las matrices matemáticas.
En CSS2.1, lás imágenes de fondo se aplicaban a un recipiente o DIV conservado sus dimensiones fijas. Afortunadamente, CSS3 introduce la propiedad background-size que permite que los fondos de pantalla sean estirados o distorsionados. Por defecto, la anchura y la altura del fondo o background se establece a auto que mantiene las dimensiones originales de la imagen.
Una etiqueta que verás contínuamente en SVG es defs. Es crucial que se entienda cuándo usar el elemento defs en SVG ya que es como una alerta que le indica al parser XML que está a punto de definir algo. Al igual que cualquier otra etiqueta XML, defs debe tener una etiqueta de apertura y cierre en el código. La etiqueta defs es un contenedor que contiene otros elementos. Cuando colocamos otras etiquetas dentro defs, se está creando un conjunto identificable que puede ser usado una vez o varias veces. La etiqueta defs permite, por tanto, establecer una definición que no se mostrará hasta que se requiera. Se podría pensar en defs como un modelo. Se crea un único esquema que se puede utilizar para construir otras estructuras múltiples.
Hace poco me vi en la tesitura de tener que usar paginación de resultados y decidí crear una pequeña clase que tuviese un fácil manejo y fuese portable sin hacer grandes cambios. Pues bien ahora os la dejo para quien la quiera usar. La clase usa como fuente de datos un array y ella sola crea los enlaces y le aplica los estilos.
Recientemente necesite usar nubes de etiquetas y he decidido realizar una pequeña clase para que crearlas sea portable, sencilla y que no necesie hacer grandes cambios para usarla. Pues bien, ahora os la dejo para vuestro "use y disfrute".
Los Gráficos Vectoriales Redimensionables (del inglés Scalable Vector Graphics) o SVG es una especificación para describir gráficos vectoriales bidimensionales, tanto estáticos como animados (estos últimos con ayuda de SMIL), en formato XML. Dicho de otra manera más sencilla, SVG es un formato que permite definir gráficos definidos como texto basados en la especificación del lenguaje XML y su desarrollo está a cargo del consorcio W3C (World Wide Web Consortium).
Antes de CSS3, cuando queríamos hacer un efecto espejo o un reflejo teníamos que usar jQuery. Eso estaba bien ya que a los usuarios de internet les encantan los efectos visuales y, por norma general, la vistosidad. Ahora con CSS3, hacer esto es muy sencillo. El código que debajo os propongo está dentro de la normativa Cross Browsing, por lo que funciona en todos los navegadore. Hay que decir que en IE8 e inferiores el efecto no es maravilloso pero no queda mal del todo.
Antes de CSS3, las transparencias sólo se podían hacer en Internet Explorer con la propiedad filter y en los demás con opacity. Esto era un poco caótico y encima funcionaba de aquella manera ya que tenía las limitaciones de aplicarse a todo el recipiente o contenedor. Ejemplo
Imagen de Pablo Enrique Fernández CasadoPablo Enrique Fernández Casado
CEO de IslaVisual, Manager, Full Stack Analyst Developer y formador por cuenta ajena con más de 25 años de experiencia en el campo de la programación y más de 10 en el campo del diseño, UX, usabilidad web y accesibilidad web. También es escritor y compositor de música, además de presentar múltiples soft kills como la escucha activa, el trabajo en equipo, la creatividad, la resiliencia o la capacidad de aprendizaje, entre otras.
Especializado en proveer soluciones integrales de bajo coste y actividades de consultoría de Usabilidad, Accesibilidad y Experiencia de Usuario (UX), además de ofrecer asesoramiento en SEO, optimización de sistemas y páginas web, entre otras habilidades.
Consentimiento para cookies y datos
Este sitio web utiliza cookies para permitir la navegación entre páginas, procesar información de dispositivos finales, cargar imágenes desde CDNs externos (como pixabay) y extraer datos personales recopilados por Google Analytics (como objetivo analilzar el tráfico o la IP origen, entre otros).
Ten en cuenta que, al rechazar las cookies, se eliminará todo rastro dejado y se abandonará la página de manera inmediata.
IslaVisual
