Comment travailler avec des icônes en SVG
▻https://la-cascade.io/comment-travailler-avec-des-icones-en-svg
Remarque : quand vous exportez un SVG depuis un outil de design, il comprendra souvent du markup et des métadonnées inutiles, ainsi que des données excessivement précises pour le chemin (dans l’attribut d). Essayez l’outil SVGOMG and comparez le code avant et après pour voir ce qui est supprimé ou simplifié.
(cet article est une traduction de ►http://fvsch.com/code/svg-icons/how-to)
Tout le nécessaire pour utiliser des SVG dans un site web, y compris :
- les méthode pour gérer l’accessibilité,
– la gestion des « vieux » navigateurs
– les astuces d’utilisation de CSS (pour modifs de taille et couleur par ex)
– des exemples d’utilisations des attributs fill et stroke
– les contournements des bogues connus des navigateurs
+ URL de SVGOMG (outil d’optimisation des fichiers SVG) : ►https://jakearchibald.github.io/svgomg
Voir aussi ▻https://useiconic.com pour un ensemble d’icones SVG et outils/méthodes associés
Pour aller plus loin (et en particulier les animations, les 6 méthodes pour intégrer un SVG dans une page HTML, les bidouilles pour les rendre responsifs, les media-queries...)
voir : ▻https://la-cascade.io/svg-style-et-anime-avec-css
les librairies :
– SnapSVG : « The JavaScript SVG library for the modern web. » (ou « Snap.svg est à SVG ce que jQuery est à HTML, et il rend la vie avec SVG plus facile. ») : ►http://snapsvg.io
– Raphaël : « Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web » : ►http://dmitrybaranovskiy.github.io/raphael
et la compilation de références : ▻https://la-cascade.io/ressources/#svg
#icone #méthode #svg #web_design #SPIP #HTML5 #iconic #svgomg #outil #animation #raphaël #snapsvg #librairie #javascript #media-queries
Je cherche à représenter un organigramme de personnel : 1. dans une forme navigable avec javascript, 2. en image statique pour impression (image ou PDF).
Quelles types de représentations, et éventuellement quels outils vous pouvez me recommander ?
@fsoulabaille Oui, mais un peu plus sexy
Dernière mise à jour le 20 novembre 2001
et qui permette de naviguer dans des organigrammes plus grands, comme par exemple :
▻http://www.lestaxinomes.org/spip.php?page=arbre&id_rubrique=12
ou éventuellement :
▻http://lifemap.univ-lyon1.fr/mobile.index.html
mais en gardant la représentation verticale typique des administrations.
Hmmm du #flash si je ne me trompe pas. J’ai besoin que ça soit fait en #javascript, pas de flash. Ça vient du concours suivant :
▻https://community.articulate.com/articles/interactive-org-charts-elearning
qui est plus orienté vers la présentation du personnel. Je cherche plutôt une manière de générer automatiquement un arbre, d’une profondeur quelconque à pouvoir explorer de façon dynamique, et d’un autre côté : à pouvoir imprimer dans son ensemble.
Avec d3.js, quelques exemples intéressants :
– tous les arbres :
▻http://blockbuilder.org/search#text=tree
– un arbre navigable :
▻https://bl.ocks.org/mbostock/4339083
– un autre, du genre de celui de taxinomes :
▻http://blockbuilder.org/nehiljain/bd4df45db78262f1d943bc8b097a0a82
Celui-là est original :
▻http://blockbuilder.org/nitaku/b82c356f1969911042d6
Mais rien qui ressemble de près à un organigramme
▻https://en.wikipedia.org/wiki/Organizational_chart
Comme dit Stupeflip :
A bas la hiérarchie
Basé sur les bibliothèques suivantes :
– d3.js
– JavaScript InfoVis Toolkit
▻https://philogb.github.io/jit
– vis.js
– leaflet.js
– orgchart
►https://github.com/dabeng/OrgChart
– treant.js, basé sur jquery et raphael.js
►https://fperucic.github.io/treant-js
▻https://jquery.com
►https://dmitrybaranovskiy.github.io/raphael
Perso j’utilise le spacetree de JIT (JavaScript InfoVis Toolkit) pour les taxinomes et je n’ai pas encore trouvé mieux comme librairies pour ça, même si elle semble un peu vieillissante et que son API n’est pas super user friendly.