Screencasts vidéo 2025, Février

Merci d'avoir regardé tout le monde, cela signifie tout pour moi et ce site. Ce billet de blog est une énorme liste de ressources pour tout ce que nous avons couvert dans cette série "

Lorsque vous utilisez inline, tous les éléments sont dans le DOM, tout comme s et s et tout autre élément HTML. Si vous avez SVG comme: et que vous faites: var rect = "

Dans ce screencast, nous approfondissons l'article de Léonie Watson sur le SVG accessible et le parcourons essentiellement point par point. J'apprécie que le premier point "

Nous avons passé beaucoup de temps à parler de l'utilisation d'inline et de l'élément. Vous pouvez créer un système d'icônes qui regorge d'avantages. Vous pouvez créer "

Vous pouvez faire beaucoup de choses avec SVG sans aucun logiciel. En supposant que vous ayez une bonne source d'images SVG en ligne, vous pouvez les utiliser directement. Mais"

JavaScript est le dernier des moyens que nous aborderons lors de l'animation de SVG. Nous avons examiné le CSS, qui est génial et assez confortable, mais il ne peut pas faire un certain nombre de SVG "

Le concept de découpage et de masquage est assez simple. Masquez certaines parties des éléments et montrez-en d'autres. La différence réelle entre eux est assez simple "

Peut-être avez-vous entendu parler des filtres CSS? Vous pouvez les appliquer à n'importe quel élément de CSS, comme: .apply-css-filter (-webkit-filter: grayscale (0.5); filter: "

Il n'y a probablement pas un cas d'utilisation extrêmement énorme pour cela, mis à part l'évidence: vous avez besoin d'un graphique raster entre autres dans une conception SVG plus grande. "

Il peut arriver un jour où vous souhaiteriez qu'un graphique que vous ayez soit SVG, mais vous ne l'avez qu'en format raster, comme GIF, JPG.webp ou PNG. Dans cette vidéo, nous examinons un exemple "

Une petite technique d'animation SVG populaire est le tracé de chemin. Si vous ne pouvez pas l'imaginer, voici une collection d'exemples de zillion que j'ai créés. Essentiellement le "

Il y a un élément dans SVG. Pas de grosse surprise ici: c'est pour mettre du texte dans le SVG. Pas de contours de formes de lettres (bien que vous puissiez le faire aussi) mais "

C'est un peu ésotérique d'une chose, j'ai juste eu besoin de le faire moi-même une fois et j'ai trouvé cela déroutant, alors j'ai pensé que je ferais une vidéo entière dessus. La chose est,"

La vidéo a été supprimée sur celui-ci. Je le re-tournerai bientôt. Si vous lisez ceci et que je ne l'ai pas encore fait, n'hésitez pas à me contacter et à me déranger "

Cette astuce ne s'applique que si vous disposez d'Adobe Illustrator CC (Creative Cloud). J'ai confirmé que cela fonctionne dans ce cas, ou dans le CC 2014 encore plus récent. C'est aussi simple que possible "

Même si l'animation de SVG avec CSS peut être plus confortable pour la personne frontale moyenne, SVG a une autre façon de faire une animation intégrée directement dans le SVG "

Lorsque vous utilisez SVG en ligne, tout ce code SVG est directement dans le HTML, et donc dans le DOM. Vous pouvez les styliser comme vous le feriez avec un, ou tout autre HTML "

Nous avons appris qu'une limitation de l'utilisation pour insérer un peu de SVG est que vous ne pouvez pas écrire de sélecteurs CSS composés qui affectent par là. Par exemple: que "

Le terme «outil de construction» peut faire peur. Cela rappelle des outils de ligne de commande sophistiqués nécessitant une configuration et des dépendances système étranges qui se cassent lorsque vous "

Le SVG en ligne peut être «stylisé» dans le sens où il a déjà des remplissages et des traits et ainsi de suite à la seconde où vous le mettez sur la page. C'est génial et totalement "

Les sites de photographie de stock ont ​​toujours un moyen de filtrer les résultats de recherche par "vecteur". Et n'oubliez pas, quel que soit le format que vous obtenez lorsque vous téléchargez quelque chose "

Nous avons appris que les outils de construction sont particulièrement géniaux pour des tâches telles que la transformation d'un dossier rempli de SVG en un bloc SVG defs. Comme toujours dans "

Nous pouvons certainement devenir un peu plus nerd avec nos outils de construction. Au moment de publier ceci, l'affiche des outils de construction est Grunt. Il y a des concurrents, "

Une fois que nous avons ce que nous appelons notre "bloc defs" de SVG - ce morceau de SVG qui définit toutes les choses que nous voulons dessiner plus tard - où le mettons-nous? Alors"

L'élément est embrayage à toute cette idée d'un système d'icônes SVG en ligne. Nous avons appris qu'une manière simple de le faire est de mettre tout ce que vous avez l'intention de dessiner plus tard "

Mettre ce bloc SVG defs en haut du document fonctionne définitivement. Il présente également certains avantages, comme le fait qu'aucune requête HTTP ne doit être effectuée. "

SVG a un élément très cool et puissant appelé. C'est assez simple dans le concept. Il trouve un autre morceau de code SVG, référencé par ID, et le clone "

Nous avons couvert "SVG en ligne" - qui laisse tomber la syntaxe SVG directement dans HTML. Vous pouvez également utiliser le même SVG en ligne à d’autres endroits, comme dans un ou "

N'oubliez pas que tout vecteur que vous pouvez entrer dans SVG. Le logiciel Adobe est excellent pour cela. Il peut y avoir des éléments vectoriels dans un PDF - ouvrez simplement le PDF et vous "

Le Noun Project est un endroit (très) fantastique pour obtenir du SVG. Laissez-nous compter les façons littéralement tout en SVG et vient réellement de cette façon Ils sont le "