Screencasts de video 2025, Enero

Gracias por ver a todos, significa todo para mí y para este sitio. Esta publicación de blog es una lista enorme de recursos para todo lo que cubrimos en esta serie "

Cuando usa en línea, todos los elementos están en el DOM, al igual que sy cualquier otro elemento HTML. Si tiene SVG como: y lo tiene: var rect = "

En este screencast profundizamos en el artículo de Léonie Watson sobre SVG accesible y esencialmente lo repasamos punto por punto. Disfruto que el primer punto "

Hemos pasado mucho tiempo hablando sobre el uso de inline y el elemento. Puede crear un sistema de iconos con muchas ventajas. Puedes crear "

Hay muchas cosas que puede hacer con SVG sin ningún software. Suponiendo que tenga una buena fuente de imágenes SVG en línea, podría usarlas directamente. Pero"

JavaScript es la última de las formas que cubriremos sobre la animación de SVG. Analizamos CSS, que es genial y bastante cómodo, pero no puede hacer varios SVG "

El concepto de recorte y enmascaramiento es bastante simple. Oculte ciertas partes de elementos y muestre otras. La diferencia real entre ellos es bastante simple "

¿Quizás has oído hablar de los filtros CSS? Puede aplicarlos a cualquier elemento de CSS, como: .apply-css-filter (-webkit-filter: grayscale (0.5); filter: "

Probablemente no haya un caso de uso tremendamente grande para esto, aparte del obvio: necesita un gráfico de trama, entre otras cosas, en un diseño SVG más grande ".

Puede llegar un día en el que desee que un gráfico que tenía fuera SVG, pero solo lo tiene en formato rasterizado, como GIF, JPG.webp o PNG. En este video miramos un ejemplo "

Una pequeña técnica de animación SVG popular es el dibujo de rutas. Si no puede imaginarlo, aquí hay una colección de un trillón de ejemplos que he creado. Esencialmente el "

Hay un elemento en SVG. No es una gran sorpresa: es para poner texto en el SVG. No contornos de formas de letras (aunque también puedes hacer eso) sino "

Esto es un poco esotérico, solo necesitaba hacerlo yo mismo una vez y lo encontré confuso, así que pensé en hacer un video completo al respecto. La cosa es,"

El video fue eliminado en este. Lo volveré a disparar algún día pronto. Si estás leyendo esto y todavía no lo he hecho, no dudes en contactarme y molestarme "

Este consejo solo se aplica si tiene Adobe Illustrator CC (Creative Cloud). Confirmé que funciona en eso, o incluso en el CC 2014 más nuevo. Es tan simple como se puede "

Aunque animar SVG con CSS puede ser más cómodo para la persona promedio de interfaz, SVG tiene otra forma de hacer la animación incorporada en el SVG "

Cuando usa SVG en línea, todo ese código SVG está directamente en el HTML y, por lo tanto, en el DOM. Puede diseñarlos como lo haría con, o cualquier otro HTML "

Aprendimos que una limitación de usar para insertar un poco de SVG es que no se pueden escribir selectores CSS compuestos que afecten allí. Por ejemplo: Eso "

El término "herramienta de construcción" puede dar miedo. Me trae a la mente elegantes herramientas de línea de comandos que requieren configuración y dependencias extrañas del sistema que se rompen cuando

SVG en línea se puede "diseñar" en el sentido de que ya tiene rellenos y trazos y todo eso en el momento en que lo colocas en la página. Eso es increíble y totalmente "

Los sitios de fotografías de archivo siempre tienen una forma de filtrar los resultados de búsqueda por "vector". Y recuerda, no importa el formato que obtengas cuando descargas algo "

Hemos aprendido que las herramientas de compilación son particularmente increíbles para tareas como convertir una carpeta llena de SVG en un bloque de defs de SVG. Como es siempre el caso en "

Definitivamente podemos volvernos un poco más nerd con nuestras herramientas de construcción. En el momento de publicar esto, el ejemplo secundario de las herramientas de construcción es Grunt. Hay competidores "

Una vez que tenemos lo que llamamos nuestro "bloque defs" de SVG, ese trozo de SVG que define todas las cosas que queremos dibujar más tarde, ¿dónde lo ponemos? Asi que"

El elemento está aferrado a toda esta idea de un sistema de iconos SVG en línea. Aprendimos que una forma limpia de hacerlo es poner todo lo que pretendes dibujar después "

Poner ese bloque de definición de SVG en la parte superior del documento definitivamente funciona. También tiene algunas ventajas, como el hecho de que no es necesario realizar ninguna solicitud HTTP "

SVG tiene un elemento muy interesante y poderoso llamado. Es bastante simple en concepto. Encuentra otro bit de código SVG, referenciado por ID, y lo clona "

Hemos cubierto "SVG en línea", que consiste en colocar la sintaxis SVG directamente en HTML. También puede usar ese mismo SVG integrado en otros lugares, como en un o "

Recuerde que cualquier vector puede ingresar a SVG. El software de Adobe es excelente en esto. Puede haber elementos vectoriales en un PDF; simplemente abra el PDF y "

The Noun Project es un lugar (muy) fantástico para obtener SVG. Vamos a contar las formas Literalmente todo en SVG y de hecho viene de esa forma Son los "