Seenthis
•
 
Identifiants personnels
  • [mot de passe oublié ?]

 
  • #s
RSS: #svg

#svg

  • #svgomg
  • #svgweb
  • #svg/png
  • #svg2png
  • #svgeezy
  • #svg_rwd
  • #svg_icone_html_clevermarks
  • #svg_use_symbol_gradient_displaynone
  • #svg_symbol_sprite_browser_compatibility_clevermarks
  • #svground
  • #svgénération
  • #svg-sanitizer
  • #svg-tranforms
0 | 25 | 50 | 75 | 100 | 125
  • @b_b
    b_b @b_b PUBLIC DOMAIN 12/05/2025
    1
    @monolecte
    1

    Revisiting Image Maps | CSS-Tricks
    ▻https://css-tricks.com/revisiting-image-maps

    https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/04/image-maps-thumb.jpg

    #image_map #svg #responsive

    b_b @b_b PUBLIC DOMAIN
    Écrire un commentaire
  • @b_b
    b_b @b_b PUBLIC DOMAIN 23/05/2024
    6
    @marcimat
    @monolecte
    @cy_altern
    @simplicissimus
    @7h36
    @hassan_nya
    6

    SVG Viewer - View, edit, and optimize SVGs
    ▻https://www.svgviewer.dev

    https://www.svgviewer.dev/images/svgviewer-og-image.png

    A very handy web-based #SVG #tool for #viewing, #editing and #optimizing SVG files.

    b_b @b_b PUBLIC DOMAIN
    Écrire un commentaire
  • @hlc
    Articles repérés par Hervé Le Crosnier @hlc CC BY 16/03/2024

    Accessible SVG: Methods for Adding Alternative Content | Envato Tuts+
    ▻https://webdesign.tutsplus.com/accessible-svg-methods-for-adding-alternative-content--cms-32205

    https://cms-assets.tutsplus.com/uploads/users/30/posts/32205/preview_image/a11y-bee.png

    Scalable Vector Graphics (SVG) are XML-based vector images. They’ve been around for a long time now but have seen a real resurgence in use over the past couple of years. There are plenty of reasons to use SVGs today including: 

    Increased native browser support of SVGs means better consistency and higher fidelity of images.
    Advancement of CSS and JavaScript techniques available to style and animate images.
    The relative “lightness” of SVG code in a world where bandwidth and performance matter more than ever.
    Another big advantage of using SVGs over standard images is that they can easily be made accessible. Since markup can be added to the SVGs directly, they give individuals who use assistive technologies (ATs), such as screen readers, more information about the images within the image itself.

    #Accessibilité #Epub #SVG

    Articles repérés par Hervé Le Crosnier @hlc CC BY
    Écrire un commentaire
  • @arno
    ARNO* @arno ART LIBRE 17/01/2024
    2
    @spip
    @baroug
    2

    Dans mon #plugin #SPIP Insertion avancée d’images :
    ▻https://plugins.spip.net/medias_responsive_mod.html
    il y a une fonction que j’utilise beaucoup : include_svg.

    Elle permet d’inclure directement dans le HTML le code tiré d’un fichier SVG.

    C’est-à-dire que l’image SVG n’est plus chargée comme une image - à la manière d’une image JPEG, mais directement intégrée à l’intérieur du HTML. Il y a deux intérêts :
    – le chargement de l’image SVG se fait en même temps que la page HTML, donc sans attendre ; c’est intéressant pour les « petits » fichiers SVG, typiquement des éléments de l’interface, qui s’affichent ainsi instantanément dans la page ;
    – c’est indispensable si on veut modifier les couleurs des éléments SVG directement dans les CSS de la page. (Je le fais beaucoup, par exemple un bouton inverse ses couleurs au survol.)

    L’originalité par rapport à d’autres fonctions équivalentes que j’ai vu passer, c’est que l’insertion est ici responsive (elle occupe 100% de la largeur disponible), il faut donc soi-même indiquer les éventuelles dimensions d’affichage désirées. Pour que cela fonctionne, la fonction est capable d’extraire les valeurs de la viewBox du fichier SVG et de fabriquer un <span> englobant qui rend l’affichage responsive.

    Ça s’utilise ainsi :

    [(#CHEMIN{hamburger.svg}|include_svg)]

    Dans la version 1.34 que je viens d’installer, la fonction gère une variable $alt :

    [(#CHEMIN{hamburger.svg}|include_svg{Menu})]

    Si on ne renseigne pas ce texte, alors le <svg> est passé en role='presentation' et alt=''. Dans l’exemple ci-dessus, le bouton qui déclenche le hamburger contient déjà la mention « MENU » à côté du hamburger, il n’est donc pas intéressant d’afficher « MENU MENU ».

    Si on renseigne ce texte, alors le <svg> est passé avec role='img' et la valeur alt=… est renseignée. Dans l’exemple ci-dessus, la mention « MENU » est donc directement associée à l’image du hamburger.

    (Note : cette fonction était aussi présente de mon plugin Maquettes multiples. Je viens de l’en supprimer (parce que “Maquette multiples” fonctionne, idéalement, avec “Insertion avancée d’images”.)

    ARNO* @arno ART LIBRE
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 17/01/2024

      SPIP propose déjà de base maintenant une fonction |balise_svg qui intègre directement dans le HTML, y compris avec un alt accessible. Il est aussi possible de forcer un taille.
      ▻https://www.spip.net/fr_article6511.html

      et s’il manque des choses on peut l’améliorer :)

      RastaPopoulos @rastapopoulos CC BY-NC
    • @b_b
      b_b @b_b PUBLIC DOMAIN 17/01/2024
      @rastapopoulos

      J’allais le dire, merci @rastapopoulos

      et s’il manque des choses on peut l’améliorer :)

      et s’il manque des choses on devrait l’améliorer :))

      b_b @b_b PUBLIC DOMAIN
    • @cy_altern
      cy_altern @cy_altern CC BY-SA 19/01/2024

      voir aussi l’indispensable plugin Z-core qui propose la balise #ICON qui fait idem une insertion « inline » d’un fichier SVG avec une class et un alt selon la syntaxe suivante :

      #ICON{repertoire/fichier.svg, class, alt}

      cf le PHPDoc de la balise : ▻https://git.spip.net/spip-contrib-extensions/z-core/src/commit/f8dc16feb349cc330d4f640be41a937ab774801e/zcore_options.php#L151

      #SVG #SPIP #ICON #z-core

      cy_altern @cy_altern CC BY-SA
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 19/01/2024

      Dernière balise qui est censée être remplacée génériquement par l’implémentation finale de ce ticket… un jour :p
      ▻https://git.spip.net/spip/spip/issues/4727

      RastaPopoulos @rastapopoulos CC BY-NC
    Écrire un commentaire
  • @cy_altern
    cy_altern @cy_altern CC BY-SA 17/01/2023

    MingCute Icon _ Carefully Designed Icon Library
    ►https://www.mingcute.com

    grosse collection open-source de pictos/icones aux formats SVG / PNG

    #picto #icone #open_source #svg

    cy_altern @cy_altern CC BY-SA
    • @jeanmarie
      jeanmarie @jeanmarie CC BY-NC-SA 18/01/2023

      ajouté à la liste ▻https://seenthis.net/messages/906168

      jeanmarie @jeanmarie CC BY-NC-SA
    • @b_b
      b_b @b_b PUBLIC DOMAIN 18/01/2023

      à la base je l’avais posté ici ▻https://git.spip.net/spip/spip/issues/4727#issuecomment-45811 où il commence à y avoir une belle collection à référencer :)

      b_b @b_b PUBLIC DOMAIN
    Écrire un commentaire
  • @b_b
    b_b @b_b PUBLIC DOMAIN 16/05/2022

    #CSS: Flexible Repeating #SVG Masks
    ▻https://tylergaw.com/blog/css-repeating-svg-masks
    ▻https://tylergaw.com/blog/assets/post-image-repeating-masks-streetcred-banner.webp

    This is a technique I used recently to create a flexible, repeating pattern using SVG with CSS mask.

    A #flexible #header with a little squiggle at the bottom instead of a straight line.

    b_b @b_b PUBLIC DOMAIN
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 16/05/2022

      ah seenthis n’affiche pas les webp automatiquement on dirait

      RastaPopoulos @rastapopoulos CC BY-NC
    • @b_b
      b_b @b_b PUBLIC DOMAIN 16/05/2022

      Vi ►https://github.com/seenthis/seenthis_squelettes/issues/13

      b_b @b_b PUBLIC DOMAIN
    Écrire un commentaire
  • @cy_altern
    cy_altern @cy_altern CC BY-SA 7/01/2022

    Redimensionnement d’arrière-plans SVG - CSS : Feuilles de style en cascade | MDN
    ▻https://developer.mozilla.org/fr/docs/Web/CSS/Scaling_of_SVG_backgrounds

    Règles de redimensionnement des fichiers SVG en background-image

    #SVG #background-image #background-size

    cy_altern @cy_altern CC BY-SA
    Écrire un commentaire
  • @cy_altern
    cy_altern @cy_altern CC BY-SA 7/01/2022

    Compresser SVG – Compresser des Images SVG en ligne
    ▻https://svgoptimizer.com/fr

    Un optimiseur de SVG en ligne

    #SVG #optimisation #outil_web

    cy_altern @cy_altern CC BY-SA
    Écrire un commentaire
  • @cy_altern
    cy_altern @cy_altern CC BY-SA 9/09/2021
    2
    @spip
    @jeanmarie
    2

    Les icônes SVG dans SPIP - Programmer avec SPIP 4.0
    ▻https://programmer.spip.net/Les-icones-SVG-dans-SPIP

    Quelques recommandations pour les éléments graphiques (icônes SVG) utilisées dans l’interface SPIP
    la page totalement introuvable dans la galaxie SPIP a moins de savoir qu’elle est dans Programmer...

    #SVG #SPIP #howto

    cy_altern @cy_altern CC BY-SA
    • @b_b
      b_b @b_b PUBLIC DOMAIN 9/09/2021

      #spip_blog

      b_b @b_b PUBLIC DOMAIN
    • @b_b
      b_b @b_b PUBLIC DOMAIN 9/09/2021

      la page totalement introuvable dans la galaxie SPIP a moins de savoir qu’elle est dans Programmer...

      Quand même plus facile à trouver là que dans un carnet de contrib où elle était avant ;)

      b_b @b_b PUBLIC DOMAIN
    • @cy_altern
      cy_altern @cy_altern CC BY-SA 10/09/2021

      Quand même plus facile à trouver là que dans un carnet de contrib où elle était avant ;)

      clairement oui :-) !
      ...mais n’aurait elle pas sa place dans la rubrique ▻https://www.spip.net/fr_rubrique269.html de spip.net ?

      cy_altern @cy_altern CC BY-SA
    • @b_b
      b_b @b_b PUBLIC DOMAIN 10/09/2021

      No se, à discuter sur... ►https://discuter.spip.net ? ^^

      b_b @b_b PUBLIC DOMAIN
    Écrire un commentaire
  • @cy_altern
    cy_altern @cy_altern CC BY-SA 26/07/2021

    meyfa/php-svg : Vector graphics (SVG) library for PHP
    ▻https://github.com/meyfa/php-svg

    Une lib PHP pour générer et convertir des SVG :

    The goal of this project is to offer features in three different, big areas:
    – Generating SVG images from PHP code and outputting them, either into XML strings or into files.
    – Loading and parsing XML strings into document trees that can be easily modified and then also turned back into strings.
    – Transforming parsed or generated document trees into raster graphics, like PNG.

    #svg #php #svg2png

    cy_altern @cy_altern CC BY-SA
    Écrire un commentaire
  • @cy_altern
    cy_altern @cy_altern CC BY-SA 18/04/2021
    3
    @fil
    @lluc
    @jeanmarie
    3

    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 #editeur #web_based #appli_web #javascript

    cy_altern @cy_altern CC BY-SA
    Écrire un commentaire
  • @cy_altern
    cy_altern @cy_altern CC BY-SA 18/04/2021
    3
    @spip
    @arno
    @jeanmarie
    3

    Quelques notes pour les icônes SVG de SPIP
    ▻https://contrib.spip.net/Quelques-notes-pour-les-icones-SVG-de-SPIP

    #SPIP #SVG

    cy_altern @cy_altern CC BY-SA
    Écrire un commentaire
  • @b_b
    b_b @b_b PUBLIC DOMAIN 1/04/2021
    8
    @jeanmarie
    @rastapopoulos
    @monolecte
    @ericw
    @baroug
    @7h36
    @alexcorp
    @cy_altern
    8

    #SVG Generators — Smashing Magazine
    ▻https://www.smashingmagazine.com/2021/03/svg-generators

    let’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

    #utilitaires #tools

    b_b @b_b PUBLIC DOMAIN
    • @monolecte
      Monolecte 😷🤬 @monolecte CC BY-NC-SA 2/04/2021

      #web_design

      Monolecte 😷🤬 @monolecte CC BY-NC-SA
    Écrire un commentaire
  • @jeanmarie
    jeanmarie @jeanmarie CC BY-NC-SA 20/03/2021
    11
    @spip
    @arno
    @fil
    @7h36
    @rastapopoulos
    @gblin
    @astier
    @dut
    @cy_altern
    @rezo
    @aris
    11
    @arno @rastapopoulos @drbouvierleduc @fil @b_b @klaus @alexcorp

    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)
    Site plus archivé mais tjs visible via ►https://web.archive.org/web/20190904140136/https://geoculture.fr/faire-bonne-chere-en-limousin

    ►https://www.nytimes.com/fr/2022/05/20/world/haiti-france-dette-reparations.html
    Pour l’intro et le zoom sur le carte

    ►https://uploads.knightlab.com/storymapjs/27497e92f064ef5616553b1c97c91106/walking-tour/index.html
    pour la navigation dans la carte

    ►https://www.women-in-type.com
    Pour les animations sur les images dans le déroulé de la page (entête et diaporama) et le filtrage des listes (menu en « sticky ») qui identifie bien les parties

    ►https://fos200ans.fr
    Pour la double navigation immersive/cartographique et l’organisation des ressources par périodes.

    ►https://www.tdg.ch/inegalites-ecologiques-ultrariches-et-superpollueurs-347025086713

    ►https://media.lesechos.fr/infographie/tenet
    Pour la double navigation chronologique (les timelines) / géographique (les flèches sous le globe)

    ►https://ig.ft.com/generative-ai

    ►https://tympanus.net/codrops/demos/?tag=scroll
    Pas mal d’exemples (attention, il y a à boire et à manger)

    ______________________________________

    LES OUTILS

    How to implement #scrollytelling with six different libraries partagé par @fil
    ►https://pudding.cool/process/how-to-implement-scrollytelling

    Scrollama is a modern & lightweight #JavaScript library for scrollytelling using IntersectionObserver in favor of scroll events.
    ►https://github.com/russellgoldenberg/scrollama

    Scroll Btween partagé par @b_b
    Tween any CSS values on any DOM element in relation with its position into the viewport.
    ►https://olivier3lanc.github.io/Scroll-Btween

    Scrollify , A #jQuery plugin that assists scrolling and smoothly snaps to sections.
    ▻https://projects.lukehaas.me/scrollify

    ScrollStory 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/scrollstory

    Vivus 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/vivus

    graph-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-scroll

    enter-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-view

    Projects | Knight Lab partagé par @klaus
    ▻https://seenthis.net/messages/792645

    revealjs 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

    #webdev #spip_recette

    jeanmarie @jeanmarie CC BY-NC-SA
    • @arno
      ARNO* @arno ART LIBRE 20/03/2021

      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.

      ARNO* @arno ART LIBRE
    • @jeanmarie
      jeanmarie @jeanmarie CC BY-NC-SA 21/03/2021

      Oui, c’est une contrainte forte à intégrer, c’est clair !

      jeanmarie @jeanmarie CC BY-NC-SA
    • @alexcorp
      alexcorp @alexcorp CC BY-NC 21/03/2021

      Voici un outil qui pourrait être utile : ►https://revealjs.com

      alexcorp @alexcorp CC BY-NC
    • @arno
      ARNO* @arno ART LIBRE 21/03/2021

      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.

      ARNO* @arno ART LIBRE
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 21/03/2021
      @drbouvierleduc @arno

      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-limousin

      En 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 :p

      Pour 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.

      RastaPopoulos @rastapopoulos CC BY-NC
    • @b_b
      b_b @b_b PUBLIC DOMAIN 21/03/2021

      #spip_blog

      b_b @b_b PUBLIC DOMAIN
    • @jeanmarie
      jeanmarie @jeanmarie CC BY-NC-SA 24/03/2021

      Merci pour vos retours forts inintéressants :)

      jeanmarie @jeanmarie CC BY-NC-SA
    • @dlechenne
      dlechenne @dlechenne 24/03/2021

      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

      dlechenne @dlechenne
    • @jeanmarie
      jeanmarie @jeanmarie CC BY-NC-SA 15/04/2021

      Ce plugin aussi : ▻https://git.spip.net/spip-contrib-extensions/storify.git

      jeanmarie @jeanmarie CC BY-NC-SA
    • @jeanmarie
      jeanmarie @jeanmarie CC BY-NC-SA 12/07/2021
      @thibnton

      J’ajoute le seen de @thibnton car il y a une partie sur le storytelling et des exemples inintéressants :

      Quels usages de l’audio pour les médias en ligne, notamment la presse écrite ? Une édition en partenariat avec Hyperradio, qui fête sa 200ème édition. podcast

      ▻https://seenthis.net/messages/921958

      https://mcusercontent.com/42d1f60e448215132ba30db60/images/ab2c0c55-a7a2-4c43-81c2-5f227c502604.png

      jeanmarie @jeanmarie CC BY-NC-SA
    • @jeanmarie
      jeanmarie @jeanmarie CC BY-NC-SA 23/05/2022

      2 ajouts :
      – pour l’intro et le zoom sur le carte : ►https://www.nytimes.com/fr/2022/05/20/world/haiti-france-dette-reparations.html
      – pour la navigation dans la carte : ►https://uploads.knightlab.com/storymapjs/27497e92f064ef5616553b1c97c91106/walking-tour/index.html

      jeanmarie @jeanmarie CC BY-NC-SA
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 23/05/2022
      @astier

      haha je me suis dit la même chose hier sur l’article Haïti !

      Et en lisant cette même série (5 articles), je me suis aussi redit que chaque module pourrait/devrait parfaitement pouvoir faire l’objet d’une « noisette » configurable du plugin Noizetier, pour construire des pages riches du même genre

      (@astier si un jour tu remets en ligne une archive de geoculture… vu que là le lien que je donnais l’année précédente est mort maintenant, pour montrer le principe d’expo virtuelle en noizetier)

      RastaPopoulos @rastapopoulos CC BY-NC
    • @astier
      bricebou @astier CC BY-SA 23/05/2022
      @rastapopoulos

      @rastapopoulos Malheureusement non, ce n’est pas au programme :-/ J’ai seulement produit un petit site présentant simplement quelques unes des notices que l’on avait produite au moment de la refonte, histoire d’en garder une trace, un petit quelque chose...

      Par contre, on peut retrouver de belles traces grâce à la Wayback Machine : ►https://web.archive.org/web/20190904140136/https://geoculture.fr/faire-bonne-chere-en-limousin

      bricebou @astier CC BY-SA
    • @jeanmarie
      jeanmarie @jeanmarie CC BY-NC-SA 20/11/2022

      1 ajout :
      ►https://www.women-in-type.com
      Pour les animations sur les images dans le déroulé de la page (entête et diaporama) et le filtrage des listes (menu en « sticky ») qui identifie bien les parties

      jeanmarie @jeanmarie CC BY-NC-SA
    • @jeanmarie
      jeanmarie @jeanmarie CC BY-NC-SA 22/08/2023
      @cy_altern

      1 ajout :
      ►https://fos200ans.fr de @cy_altern
      Pour la double navigation immersive/cartographique et l’organisation des ressources par périodes.

      jeanmarie @jeanmarie CC BY-NC-SA
    • @jeanmarie
      jeanmarie @jeanmarie CC BY-NC-SA 25/08/2023
      @fil

      1 ajout (malgré #paywall)
      ►https://www.tdg.ch/inegalites-ecologiques-ultrariches-et-superpollueurs-347025086713 repéré par @fil sur mastodon

      jeanmarie @jeanmarie CC BY-NC-SA
    • @jeanmarie
      jeanmarie @jeanmarie CC BY-NC-SA 29/08/2023

      1 ajout
      ►https://media.lesechos.fr/infographie/tenet
      Pour la double navigation chronologique (les timelines) / géographique (les flèches sous le globe)

      jeanmarie @jeanmarie CC BY-NC-SA
    • @jeanmarie
      jeanmarie @jeanmarie CC BY-NC-SA 20/09/2023
      @fil

      1 ajout
      ►https://ig.ft.com/generative-ai
      @fil sur mastodon

      jeanmarie @jeanmarie CC BY-NC-SA
    • @jeanmarie
      jeanmarie @jeanmarie CC BY-NC-SA 25/04/2024

      1 ajout

      ►https://tympanus.net/codrops/demos/?tag=scroll
      Pas mal d’exemples (attention, il y a à boire et à manger)

      dont celui-ci qui fonctionne bien ▻https://tympanus.net/codrops/2024/04/23/blurry-text-reveal-on-scroll

      jeanmarie @jeanmarie CC BY-NC-SA
    • @jeanmarie
      jeanmarie @jeanmarie CC BY-NC-SA 24/05/2025

      ►https://visualizing-lubartworld.org

      jeanmarie @jeanmarie CC BY-NC-SA
    Écrire un commentaire
  • @tofulm
    tofulm @tofulm 13/03/2021
    13
    @cy_altern
    @jeanmarie
    @rastapopoulos
    @grego
    @ericw
    @arno
    @bouts
    @unagi
    @gblin
    @baroug
    @lianes1
    @marcimat
    @b_b
    13

    Iconduck - Free open source icons, illustrations and graphics
    ▻https://iconduck.com
    #icone #svg

    tofulm @tofulm
    • @jeanmarie
      jeanmarie @jeanmarie CC BY-NC-SA 31/03/2021
      @monolecte @b_b @cy_altern @rastapopoulos

      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

      jeanmarie @jeanmarie CC BY-NC-SA
    • @tofulm
      tofulm @tofulm 31/03/2021

      ►https://thenounproject.com

      tofulm @tofulm
    • @touti
      vide @touti 31/03/2021

      ►https://icomoon.io

      vide @touti
    • @cocoadaemon
      alban @cocoadaemon 31/03/2021

      ►https://unsplash.com

      alban @cocoadaemon
    • @bouts
      bouts @bouts PUBLIC DOMAIN 1/04/2021

      ►https://undraw.co

      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.

      bouts @bouts PUBLIC DOMAIN
    • @jeanmarie
      jeanmarie @jeanmarie CC BY-NC-SA 1/04/2021

      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.

      jeanmarie @jeanmarie CC BY-NC-SA
    • @jeanmarie
      jeanmarie @jeanmarie CC BY-NC-SA 13/04/2021

      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/icons

      Source + avis : ▻https://core.spip.net/issues/4727

      How to Design Better Icons
      ▻https://blog.prototypr.io/how-to-design-better-icons-869d067fddbf

      jeanmarie @jeanmarie CC BY-NC-SA
    • @jeanmarie
      jeanmarie @jeanmarie CC BY-NC-SA 1/02/2022

      ▻https://icones.js.org

      jeanmarie @jeanmarie CC BY-NC-SA
    • @jeanmarie
      jeanmarie @jeanmarie CC BY-NC-SA 18/01/2023
      @cy_altern

      ►https://www.mingcute.com par @cy_altern

      jeanmarie @jeanmarie CC BY-NC-SA
    Écrire un commentaire
  • @rastapopoulos
    RastaPopoulos @rastapopoulos CC BY-NC 10/03/2021
    4
    @monolecte
    @biggrizzly
    @cy_altern
    @jeanmarie
    4

    SVG Repo - Free SVG Vectors and Icons
    ►https://www.svgrepo.com

    #icones #icons #SVG #interface #intégration #web #pictos

    RastaPopoulos @rastapopoulos CC BY-NC
    Écrire un commentaire
  • @cy_altern
    cy_altern @cy_altern CC BY-SA 20/07/2020
    3
    @jeanmarie
    @arno
    @tofulm
    3

    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

    #loading #animation #svg

    cy_altern @cy_altern CC BY-SA
    Écrire un commentaire
  • @cy_altern
    cy_altern @cy_altern CC BY-SA 23/05/2020
    2
    @jeanmarie
    @aurelie
    2

    Image Techniques On The Web
    ▻https://ishadeed.com/article/image-techniques

    Manipulations 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

    #image #web_dev #css #svg #img #picture

    cy_altern @cy_altern CC BY-SA
    • @aurelie
      Aurélie @aurelie 11/07/2021

      Pour les #svg, dernièrement, sous Angular Material, j’ai utilisé angular-svg-icon pour pouvoir facilement styler les SVG, sans que leur code « pollue » le dev.

      Concrètement, lorsqu’on inspecte dans le navigateur, le code du SVG s’affiche. Donc on peut aller faire ce qu’on veut sur les parh & co 😁

      J’avais utilisé un outil un peu similaire, il y a quelques années sur un projet en JS, donc on peut aussi trouver pour d’autres choses qu’Angular 😉
      #angular #css
      ▻https://www.npmjs.com/package/angular-svg-icon

      Aurélie @aurelie
    Écrire un commentaire
  • @olange
    Olivier Lange @olange CC BY-SA 20/03/2020

    « 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.

    Olivier Lange @olange CC BY-SA
    Écrire un commentaire
  • @severo
    severo @severo PUBLIC DOMAIN 3/02/2020

    ▻https://layercake.graphics

    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.

    #svelte #svg #canvas #webgl

    severo @severo PUBLIC DOMAIN
    Écrire un commentaire
  • @cy_altern
    cy_altern @cy_altern CC BY-SA 2/08/2019
    9
    @spip
    @tofulm
    @b_b
    @jeanmarie
    @fil
    @baroug
    @7h36
    @rastapopoulos
    @touti
    9

    Révision 116199 – SPIP-ZONE
    ▻https://zone.spip.net/trac/spip-zone/changeset/116199/spip-zone

    Documentation 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 PotRace

    Ca va dépoter les SVG dans SPIP :-) !

    #SVG #vectoriser #PHP #SPIP #filtres_images_vectorise #plugin

    cy_altern @cy_altern CC BY-SA
    • @b_b
      b_b @b_b PUBLIC DOMAIN 3/08/2019

      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>

      http://vrac.kupaia.fr/vectooor.png?1

      Par contre on dirait qu’il y a un petit glitch avec image_geopotrize par défaut.

      PS : le glitch est corrigé et c’est encore plus beau :)

      b_b @b_b PUBLIC DOMAIN
    Écrire un commentaire
  • @b_b
    b_b @b_b PUBLIC DOMAIN 18/07/2019
    7
    @spip
    @arno
    @kent1
    @jeanmarie
    @cy_altern
    @7h36
    @tofulm
    7

    [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-img

    Cela 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 SVG

    Le 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

    #spip_blog

    b_b @b_b PUBLIC DOMAIN
    Écrire un commentaire
  • @cy_altern
    cy_altern @cy_altern CC BY-SA 4/07/2019
    1
    @tofulm
    1

    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-PNG

    Les 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

    cy_altern @cy_altern CC BY-SA
    • @b_b
      b_b @b_b PUBLIC DOMAIN 9/07/2019

      Ici aussi ▻https://seenthis.net/messages/558374 :)

      b_b @b_b PUBLIC DOMAIN
    Écrire un commentaire
  • @cy_altern
    cy_altern @cy_altern CC BY-SA 20/06/2019
    1
    @spip
    1

    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

    #SVG #SPIP

    cy_altern @cy_altern CC BY-SA
    Écrire un commentaire
  • @stephane
    Stéphane Bortzmeyer @stephane CC BY-SA 11/06/2019
    2
    @marcimat
    @jeanmarie
    2

    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 :

    ►https://undraw.co

    Plein d’images : ▻https://undraw.co/illustrations

    Un moteur de recherche : ▻https://undraw.co/search

    https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/quitting_time_dm8t.svg

    #illustrations #graphisme #SVG

    Stéphane Bortzmeyer @stephane CC BY-SA
    Écrire un commentaire
0 | 25 | 50 | 75 | 100 | 125

Thèmes liés

  • #svg
  • #spip
  • #animation
  • #icone
  • #css
  • #intégration
  • #clevermarks
  • #optimisation
  • #sprite
  • #smil
  • #d3.js
  • #gulp
  • #web
  • #cartographie
  • #javascript
  • #css
  • #graphisme
  • #html
  • #spip_blog
  • technology: smil
  • technology: animation
  • #web_dev
  • #php
  • #pictos
  • #image
  • #icon
  • #html
  • technology: html
  • #viewport
  • #web_design
  • #howto
  • company: github
  • #typographie
  • #webdesign
  • #images
  • #jpg
  • #png
  • #rwd
  • #design
  • #fluide