SVG-Edit/svgedit: Powerful SVG-Editor for your browser
▻https://github.com/SVG-Edit/svgedit
un éditeur de SVG en JS, open-source
A tester sur ▻https://svg-edit.github.io/svgedit/dist/editor/index.html
#svg
-
-
Quelques notes pour les icônes SVG de SPIP
▻https://contrib.spip.net/Quelques-notes-pour-les-icones-SVG-de-SPIP -
#SVG Generators — Smashing Magazine
▻https://www.smashingmagazine.com/2021/03/svg-generatorslet’s look at SVG generators — for everything from shapes and backgrounds to SVG path visualizers and SVG → JSX generators.
Pas mal de ressources : backgrounds, code snippets, compression, cropping tools, data visualization, doodle patterns, editors, favicon, filters color matrix mixer, geometric shapes, icon transitions, JPG/PNG → SVG, path visualizers, polygons, repeating patterns, squircicles, section dividers, SVG assets manager, SVG → JSX, SVGs → SVG sprites, text warping, waves, woodworking patterns
-
En préparation d’un (potentiel) projet avec une compagnie de théâtre dont le site fera partie intégrante de la création finale, j’ai commencé à recenser des exemples et outils (dont certains trouvé ici même) pour mettre en place une narration sur le web.
Si vous avez des exemples et des outils à ajouter, je suis preneur.
______________________________________
LES EXEMPLES
▻http://www.framescollection.com/tunnelrats.html
Peu de technique, mais une narration forte illustrée et rythmée graphiquement▻http://www.framescollection.com/manly.html
essentiellement graphique mais peu adaptable sur mobile▻https://projects.lukehaas.me/scrollify/examples/apple
principalement des animations visuelles et peu de texte▻https://projects.lukehaas.me/scrollify/examples/layered-scrolling
joue principalement sur les fonds (image ou vidéos) et peu de texte►http://computer-grrrls.gaite-lyrique.net
joue principalement sur le rythme des blocs de contenu▻https://brest1937.kubweb.media/episode/heritage
alterne animations et contenus textes/vidéos▻https://www.nytimes.com/interactive/2015/09/17/nyregion/st-patricks-cathedral-pope-francis-visit.html
très simple, repose sur l’image▻https://www.liberation.fr/apps/2019/02/paris-populaire
moins linéaire, on doit se balader sur la carte pour avoir accès aux contenus►https://fabre.montpellier3m.fr/Correspondance d’@arno
pour l’alternance de texte à lire (défilement vertical) et des photos des pages manuscrites (défilement horizontal)▻https://www.bloomberg.com/graphics/2015-auto-sales
haut niveau, avec animation de #SVG et tout▻https://www.theguardian.com/us-news/ng-interactive/2015/oct/19/homan-square-chicago-police-detainees
idem, gros niveau, The Guardian quoi►https://geoculture.fr/musiques-et-danses-traditionnelles-du-limousin tout en SPIP / Noizetier par @rastapopoulos et @drbouvierleduc (cf commentaire)
______________________________________
LES OUTILS
How to implement #scrollytelling with six different libraries partagé par @fil
►https://pudding.cool/process/how-to-implement-scrollytellingScrollama is a modern & lightweight #JavaScript library for scrollytelling using IntersectionObserver in favor of scroll events.
►https://github.com/russellgoldenberg/scrollamaScrollify , A #jQuery plugin that assists scrolling and smoothly snaps to sections.
▻https://projects.lukehaas.me/scrollifyScrollStory is a jQuery plugin for building scroll-based stories. Rather than doing a specific task, it aims to be a tool to help solve general problems.
▻https://sjwilliams.github.io/scrollstoryVivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearence of being drawn.
►https://maxwellito.github.io/vivusgraph-scroll takes a selection of explanatory text sections and dispatches active events as different sections are scrolled into to view. These active events can be used to update a chart’s state.
▻https://github.com/1wheel/graph-scrollenter-view . Dependency-free JavaScript library to detect when element enters into view. See demo. It uses requestAnimationFrame in favor of scroll events for less jank.
▻https://github.com/russellgoldenberg/enter-viewProjects | Knight Lab partagé par @klaus
▻https://seenthis.net/messages/792645revealjs The HTML Presentation Framework partagé par @alexcorp en commentaire
►https://revealjs.com______________________________________
TAGS SUR SEENTHIS#art_directed_article / #scrollytelling, #narration et #Nouvelles_narrations / #webdoc / #longforms
-
Gaffe : dans un très grand nombre d’exemples, l’affichage n’est pas du tout responsive. C’est tout de même dommage de nos jours.
-
Oui, c’est une contrainte forte à intégrer, c’est clair !
-
Voici un outil qui pourrait être utile : ►https://revealjs.com
-
Un jour il faudra que je développe ces idées, parce que ça me tient à cœur, mais rapidement, sur les limites de ces formats :
– les longforms ont été popularisés vers 2011 à partir du NY Times ; donc toute une partie des développements techniques s’est fait sans trop se poser la question du responsive, pas encore totalement à la mode à l’époque ;
– faire ça bien, ça coûte bonbon. Donc le NY Times n’en fait presque plus ; et les autres ont repris les usages les plus simples et plus « automatisables ». Genre des effets de parallaxe et les images en fond
fixed, souvent pas bien jolis, et qui donnent plus envie de vomir qu’autre chose. Les longforms du Monde, à un moment, c’était quasiment que ça.– et on est toujours dans une logique de CMS tout-automatique et de réduction des coûts. Les « art directed articles », comme le nom l’indique, ça implique qu’il y a une direction artistique (donc une personne dont c’est le métier) pour chaque article. Et mon constat : il n’y a pas vraiment de gens prêts à payer pour ça.
– l’idéologie de l’édition sur le Web n’est plus de faire des pages Web super-belles avec de super-articles longs qui attireraient les gens, mais de partager sur les supports avec un maximum d’audience. Une grosse partie des médias, ces dernières années, s’est engouffré d’abord sur les formats courts (à une époque, on a même eu l’idée de découper les articles en plusieurs pages pour multiplier les paves vues…), puis les « pages » Facebook, puis que les formats « AMP » de Google ; certes ils en reviennent, mais c’est plus avec ce genre de tendances que tu vas avoir des développements du côté de la narration enrichie sur le Web…
– et dernier écueil : ça demande des graphistes avec des compétences techniques, et des informaticiens avec des compétences graphiques, et ça ce sont des animaux mythologiques dont l’existence est encore discutée par les archéologues du Web.
-
Autre exemple, ce que l’on avait fait il a quelques années avec @drbouvierleduc pour la région Limousin, des « expos virtuelles » dans le site Géoculture (toute la rubrique Focus) :
►https://geoculture.fr/musiques-et-danses-traditionnelles-du-limousinEn gros 100% avec le Noizetier. Dans l’idée ça peut soit être un unique contenu SPIP avec des centaines de noisettes, soit comme on l’a fait là, une page qui agrège les noisettes de plusieurs Rubriques/Sous-rubriques ce qui permet de gérer le chapitrage plus simplement (cf le menu chapitre en haut).
Et c’est responsive :pPour moi le noizetier est une des manières les plus souples/complètes de faire ça. Vu que tu peux en inventer autant que tu veux, suivant ce qui a été décidé avec la direction artistique de permettre de faire.
Ça évite d’être lié à un contenu SPIP, et à seulement 2 ou 3 choix possibles, car sinon faudrait ajouter 12000 champs. On doit pouvoir reproduire les long forms de @arno assez facilement à priori.
Par ailleurs tu peux les utiliser aussi bien vraiment toutes seules (le contenu vient de champs de config des noisettes) ou en utilisant le « vrai » contenu éditorial du site (le contenu de telle noisette venant du contenu d’un article, d’un événement, etc).
Le plugin ne fait rien lui-même hein : tout dépend vraiment de ton « jeu de noisettes », càd ce que vous permettez de faire aux gens. C’est à peu près infini comme possibilités, vu que tu peux parfaitement avoir des noisettes « cartes », des noisettes « frise chrono », ou tout autre animation kikou un peu complexe, que tu intercales avec d’autres contenus plus simple, des textes, des images, etc.
-
-
Merci pour vos retours forts inintéressants :)
-
Purement graphique et avec un travail de design sonore mais seulement dans une app
Phallaina, le roman graphique
▻https://youtu.be/GIqQIpmhJGQ
–
j’ai en ai développé plusieurs avec des étudiant.es des Beaux-arts de Bordeaux ou j’enseigne.
Ce ne sont que des images et ce n’est pas connecté à une base de donnée, par manque de temps pour un simple projet pédagogique, mais c’est faisable.
▻https://design-ebabx.fr/webapp/seahot
▻https://design-ebabx.fr/webapp/affluence -
-
-
Iconduck - Free open source icons, illustrations and graphics
▻https://iconduck.com
#icone #svg-
Y a pas mal de ressources partagées ici, si on les recensait ? :)
►https://orioniconlibrary.com
►https://www.flaticon.com
►https://flaticons.net par
►https://icons.pixsellz.io
►https://icongr.am
►https://remixicon.com
►https://www.svgrepo.com
►https://danklammer.com/bytesize-icons(par @monolecte, @b_b, @cy_altern, @rastapopoulos)
#Icons #ressource_graphique #webdesign #pictos #graphisme #ergonomie #web #intégration #interface
-
-
-
-
unDraw - Open source illustrations for any idea
The design project with open-source illustrations for any idea you can imagine and create. Create beautiful websites, products and applications with your color, for free. -
Dans mon idée, on partait plus sur les icônes ici pour s’y retrouver et les outils dans d’autres fils :) et avec un #Ressources_graphisme ou #Ressources_integration pour tout lier.
Mais à voir. -
des nouveaux
– ▻https://feathericons.com
– ▻https://github.com/primer/octicons
– ▻https://fonts.google.com/icons?selected=Material+Icons
– ▻https://icons.coreui.io/icons
– ▻https://github.com/danklammer/bytesize-icons
– ▻https://useiconic.com/open
– ▻https://forkaweso.me/Fork-Awesome/iconsSource + avis : ▻https://core.spip.net/issues/4727
How to Design Better Icons
▻https://blog.prototypr.io/how-to-design-better-icons-869d067fddbf
-
-
SVG Repo - Free SVG Vectors and Icons
►https://www.svgrepo.com -
Building a pure CSS animated SVG spinner - Glenn McComb : front end developer and designer
▻https://glennmccomb.com/articles/building-a-pure-css-animated-svg-spinner -
Image Techniques On The Web
▻https://ishadeed.com/article/image-techniquesManipulations avancées pour la gestion des images dans les pages web :
– balises <img> et <picture>,
– attributs HTML height, width, alt et srcset
– propriétés CSS object-fit et object-position (dément !),
– embed de balise <img> dans une balise <svg> pour pouvoir jouer avec la propriété CSS preserveAspectRatio, lui associer un <title> et une <desc>
– intégration d’images SVG et utilisation de balises mask
– exemples d’utilisation d’un div avec border pour emballer une image et la faire ressortir si ton sur ton -
« Recreating The Arduino Pushbutton Using SVG And ‹lit-element› » by Uri Shaked, 20.01.2020
▻https://www.smashingmagazine.com/2020/01/recreating-arduino-pushbutton-svg#webComponents #svg #html #usability #accessibility #aria #article
Cet article est truffé d’astuces et il adresse richement l’utilisation de lit-html et lit-element pour créer un composant SVG, bien fichu et accessible qui plus est.
Pardonnez-moi, oui, je m’intéresse parfois à ces extremum de technicalité (si vous me passez encore ce néo-anglicisme de mon cru) et arcanes du web. J’adore les technologies du web en fait, suis accro.
-
Layer Cake is a graphics framework built on top of Svelte. It measures your target div and your data and creates scales that stay synced on layout changes. Use these scales to organize multiple, mostly-reusable Svelte components, whether they be SVG, HTML, Canvas or WebGL. Since they all share the same coordinate space, you can build your graphic one layer at a time.
-
Révision 116199 – SPIP-ZONE
▻https://zone.spip.net/trac/spip-zone/changeset/116199/spip-zoneDocumentation provisoire du plugin SPIP « filtres_images_vectorise » qui propose 3 types de filtres de vectorisation d’images bitmaps en SVG.
Utilise soit la lib GeometrizePHP soit la lib PotRace soit une combinaison des 2.
Voir aussi :
– ▻https://github.com/Cerdic/geometrize-php pour GeometrizePHP
– ►https://github.com/Otamay/potracio (+ ►https://seenthis.net/messages/645575) pour PotRaceCa va dépoter les SVG dans SPIP :-) !
#SVG #vectoriser #PHP #SPIP #filtres_images_vectorise #plugin
-
C’est beau :)
<BOUCLE_docs(DOCUMENTS){id_document IN 8,9}>
[(#FICHIER|image_reduire{#GET{taille}})]
[(#FICHIER|image_reduire{#GET{taille}}|image_geometrize)]
[(#FICHIER|image_reduire{#GET{taille}}|image_potrace)]
[(#FICHIER|image_reduire{#GET{taille}}|image_geopotrize)]
<hr/>
</BOUCLE_docs>Par contre on dirait qu’il y a un petit glitch avec
image_geopotrizepar défaut.PS : le glitch est corrigé et c’est encore plus beau :)
-
-
[spip-dev] Les #SVG sont des images comme les autres
Hello,
On est en 2019, la version trunk de SPIP supporte maintenant totalement les SVG
comme des images.
▻https://caniuse.com/#feat=svg-imgCela veut dire :
• qu’on peut les uploader comme des images dans les documents joints
• qu’on peut les uploader comme logo d’objet
• que les aperçus de SVG s’affichent bien partout dans l’espace privé
• que les filtres |image_xxx utilisés partout dans les squelettes pourront
s’appliquer dessus sans rien casser
• soit en appliquant la même transformation que pour un bitmap si le filtre
|image_xx supporte expressément les SVG
• soit en ne faisant rien si le filtre n’a pas été modifié pour supporter
les SVGLe support des filtres images devrait permettre d’utiliser des images SVG
directement, sans aucune modification des squelettes ni de code, sauf peut être dans certain cas de filtres images perso un peu velus qui modifient notamment les dimensions de l’image▻https://www.mail-archive.com/spip-dev@rezo.net/msg67228.html
-
encharm/Font-Awesome-SVG-PNG: Font Awesome split to individual SVG and PNG files of different sizes along with Node.JS based generator
►https://github.com/encharm/Font-Awesome-SVG-PNGLes icônes de Font Awesome 4 en fichiers individuels SVG et PNG + un fichier de sprite SVG + un générateur en node.js pour créer des combinaisons taille + couleur personnalisées: exemple pour générer un set rouge en 128 et 256px:
font-awesome-svg-png --color red --sizes 128,256#font_awesome #svg #icône
-
Support des images SVG : |balise_img ne cherche pas a calculer une wi… · spip/SPIP 46d394b
▻https://git.spip.net/spip/spip/commit/46d394be6a8d076b530d2a7a71ed6adfc619188f|balise_svg permet d’inserer le SVG inline avec ou sans alt
-
Si vous cherchez des illustrations sous licence libre pour les thèmes du travail de bureau, de la gestion de projets, du Web, et autres trucs modernes, j’aime bien le concept de ce site :
Plein d’images : ▻https://undraw.co/illustrations
Un moteur de recherche : ▻https://undraw.co/search
-
jkphl/gulp-svg-sprite : SVG sprites & stacks galore — Gulp plugin wrapping around svg-sprite that reads in a bunch of SVG files, optimizes them and creates SVG sprites and CSS resources in various flavours
►https://github.com/jkphl/gulp-svg-spriteUn script Gulp pour faire les sprites SVG. La doc est un peu éparpillée :
La doc générale de l’outil node.js qui fait les sprite : ►https://github.com/jkphl/svg-sprite
La doc spécifique Gulp : ►https://github.com/jkphl/gulp-svg-spriteUtilise SVGO : SVG Optimizer is a Nodejs-based tool for optimizing SVG vector graphics files, cf ▻https://github.com/svg/svgo
La doc pour configurer les options de SVGO avec le script de sprite : ▻https://github.com/jkphl/svg-sprite/blob/master/docs/configuration.md#svg-transformations
Voir aussi :
– les plugins de SVGO : ▻https://github.com/svg/svgo#built-in-plugins
– la version Gulp de SVGO : ▻https://github.com/ben-eb/gulp-svgmin
– une interface graphique pour SVGO : ►https://jakearchibald.github.io/svgomg#SVG #gulp #sprite #SVGO #optimisation
-
-
Using SVG | CSS-Tricks
►https://css-tricks.com/using-svgSynthèse complète de toutes les méthodes pour intégrer du SVG dans une page web
-
Remix Icon - Open source icon library
►https://remixicon.comRemix Icon is a set of open-source neutral-style system symbols for designers and developers. Unlike a patchwork icon library, 1400+ icons are all elaborately crafted so that they are born with the gene of readability, consistency and perfect pixels. Each icon was designed in “Outlined” and “Filled” styles based on a 24x24 grid. Of course, all the icons are free for both personal and commercial use.
Jeu d’icônes pour le développement web.
Présente le gros avantage de pouvoir être utilisé comme une webfont (à la fontawesome/glyphicon) ou en tant qu’images SVG individuelle mais aussi sous forme de sprite SVG.
La documentation : ▻https://github.com/Remix-Design/remixicon#usage#icone #svg #sprite #fontawesome #glyphicon #web_dev #remixicon
-
Integration d’un systeme d’icone lightweight (sprite SVG) et accessible (texte alternatif aria possible) base sur ►https://danklammer.com/bytesize-icons
#ICON{search,icon-lg,Rechercher}Le jeu d’icone est personalisable, il suffit
define('_ICON_SPRITE_SVG_FILE', 'chemin vers le sprite svg');
et de definir sa fonctionfiltre_icone_ancre_from_name($name){}pour faire correspondre les ancres dans le sprite avec les petits noms d’icone (quitte a renommer/etendre)+ une feuille de style icons.css qu’il peut etre utile de personaliser si on change le jeu d’icone
(BootStrap ayant change puis abandonne la famille d’icones fournie par defaut, on trace donc notre route)
-
Comprendre SVG viewBox et viewport
▻https://la-cascade.io/comprendre-svg-viewbox-et-viewportUn des casse-tête de l’affichage « inline » du SVG : gérer la taille d’affichage pour ne pas le tronquer.
Une affaire d’attributs viewport , viewBox et preserveAspectRatio
Voir aussi :
▻https://la-cascade.io/comprendre-svg-viewbox
▻https://la-cascade.io/comprendre-svg-preserveaspectratio#svg #viewport #viewBox #preserveAspectRatio #ratio #affichage
-
Marrant, on s’est cassé la tête la dessus pas plus tard que la semaine dernière, mais c’était pour que ça soit responsive et que ça se retaille comme il faut.
L’erreur la plus conne qui a bouffé le plus de temps, c’est qu’il faut UN B MAJUSCULE BORDEL à viewBox, sinon ça ne marche pas comme il faut. :D
-
c’était pour que ça soit responsive et que ça se retaille comme il faut.
hé hé ! exactement le même problème... Je suis preneur d’une solution qui permettrait d’avoir un affichage responsive « automagiquement » en pur CSS (sans avoir à donner une taille « en dur » à viewport/viewBox)...
-
C’est pas possible, mais la vaille de la viewBox c’est juste une taille qui sert à donner un ratio, une proportion, ça veut pas dire que ça sera cette taille là. Une fois que tu as définis cette proportion, bah en CSS là tu donnes la taille que tu veux, et avec un max-width:100% et un height:auto comme sur les images, bah hop ça te fait un truc responsive. Faut juste pas oublier le B majuscule…
-
-
Spip et SVG
▻https://contrib.spip.net/Spip-et-SVGLa page du carnet de SPIP-contrib pour tout ce qui touche à l’intégration de SVG en SPIP
-
GitHub - darylldoyle/svg-sanitizer : A PHP SVG/XML Sanitizer
►https://github.com/darylldoyle/svg-sanitizerLibrairie PHP pour sécuriser les SVG
-
Référencé ici aussi ▻https://seenthis.net/messages/621498 par un certain @cy_altern ^^
-
-
ah m*** ! j’ai vraiment un problème avec les doublons dans Seenthis...
-
Deux conseils :
– toujours vérifier la présence de la tite flèche à côté des liens (sous le message) avant de poster
– utiliser la formidable extension seenthis pour Firefox qui te permet de fouiller rapidement dans tes postsEt hop :)
-
-
GitHub - maphew/svg-explorer-extension
Utilitaire pour ajouter la visualisation des SVG dans l’explorateur Windows (on se demande bien pourquoi cet OS ne le fait pas par défaut ?)
-
Introduction – SVG 1.1 (Second Edition)
▻https://www.w3.org/TR/SVG/intro.html#MIMETypemime-type pour les SVG et autres spécifications
et un outil pour tester l’en-tête envoyé par un serveur : ▻http://planetsvg.com/tools/mime.php
