CairoSVG
▻http://cairosvg.org
You can use CairoSVG as a standalone command-line program:
$ cairosvg image.svg -o image.png
$ cairosvg image.svg -o image.pdf
#conversion #SVG #PDF
CairoSVG
▻http://cairosvg.org
You can use CairoSVG as a standalone command-line program:
$ cairosvg image.svg -o image.png
$ cairosvg image.svg -o image.pdf
#conversion #SVG #PDF
Perso j’avais utilisé inkscape en cli sur un projet dont tu te souviens peut-être ;)
@fil Tu solutionnes des problèmes toi, et ben c’est pas beau. ( cf ►https://seenthis.net/messages/564345 )
Flash d’Adobe à l’agonie - LinuxFr.org
▻http://linuxfr.org/news/flash-d-adobe-a-l-agonie
Un historique à la « Rise and fall » de la technologie Flash :
Flash Player et sa technologie sous‐jacente, tous deux développés par la société Adobe, n’en finissent plus d’agoniser. Sommes‐nous en train d’assister aux derniers soubresauts ?
[...]
Dans la première partie de cette dépêche, nous présenterons Flash et reviendrons plus en détail sur son histoire, son apogée, ses concurrents, puis sa chute vers l’oubli.
La seconde partie nous permettra de détailler les technologies du moment, afin de donner quelques pointeurs aux développeurs et designers Web souhaitant se mettre au goût du jour.
A noter un paragraphe sur l’émergence de la spécification EME qui menace de DRMisation l’ensemble des contenus du web :
En effet, en 2013, Google, Microsoft et Netflix publient conjointement un brouillon de spécification W3C nommé « Encrypted Media Extensions » (EME ; version actuelle de la spécification), ce qui n’est rien de moins qu’un standard pour autoriser les DRM dans la norme HTML5. Le but est donc de contrôler la visualisation/écoute de media en streaming (vidéo et audio), d’en empêcher le téléchargement, etc.
À ce jour, EME est déjà implémenté dans Mozilla Firefox (sous Windows seulement), Google Chrome, Apple Safari et Microsoft Explorer et Edge, à savoir l’ensemble des plus gros navigateurs du marché. Et bien sûr les services majeurs comme Netflix et Youtube fournissent déjà du contenu DRMisé par EME en HTML5.
#flash #propriétaire #standardisation #HTML5 #SVG #EME #standard #animation #jeux #streaming
référencé dans l’article :
- « How to Scale SVG » ▻https://css-tricks.com/scale-svg pour les différences de mise à l’échelle d’un SVG en fonction du mode d’inclusion dans le HTML
- « Understanding SVG Coordinate Systems and Transformations » ▻https://sarasoueidan.com/blog/svg-coordinate-systems pour les subtilités d’utilisation des attributs viewport, viewBox, et preserveAspectRatio
avec une interface de démo et une « cheatsheet » pour ces attributs sur ▻https://sarasoueidan.com/demos/interactive-svg-coordinate-system/index.html
Generative elevation map with SVG filters - bl.ocks.org
▻http://bl.ocks.org/monfera/21be9bb116a8e5b2423b706155fdb718
This SVG filter generates elevation, flat waters and icy mesas.
This block has:
– generative topographic map creation with SVG
– use of a #D3.js or custom palette in an #SVG filter, testing with pretty topo #palettes
– bump mapping and lighting
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
mapzen/svg-export : SVG export tool for vector tiles
▻https://github.com/mapzen/svg-export
This is a tool for taking vector tile data and exporting it to an #SVG file.
Live demo is available here: ▻http://mapzen.github.io/svg-export
2085 free SVG and PNG icons for your games or apps
▻http://game-icons.net
An ever growing collection of game icons
Dozen new symbols are added weekly and organized in intuitive categories to offer both a comfy browsing and let room for serendipity.
Stay up to date by following the project on twitter, subscribing to the newsletter or just fetching the RSS feed.
Easy styling thanks to SVG
All the images are downloadable in a vector format, so you can easily tweak colors, rotation and adjust effects like blur, bevels or shadows.
Another direct benefit is infinite scaling, it means no size limit for the resulting files which can be used for high resolution interfaces, retina display, logos, stencils etc...
Community oriented
People designing video games or crafting board games have different constraints and needs.
How to work with SVG icons
►http://fvsch.com/code/svg-icons/how-to
“There are many ways to use SVG icons in HTML and CSS, and I haven’t tried them all. This is how we do it in our small front-end team…”
Literally #canvas — Literally Canvas v0.4.11 docs - HTML5 drawing board - MS Paint in your web browser
▻http://literallycanvas.com/index.html
Literally Canvas is an extensible, open source (BSD-licensed), HTML5 drawing widget. Its only dependency is React.js. You can use it to embed drawing boards in web pages. It’s kind of like an extensible MS Paint in JavaScript. Users can sketch drawings and you can do what you like with the results. It comes with an easy-to-use #jQuery plugin.
DataMaps
Customizable SVG map visualizations for the web in a single Javascript file using D3.js
» Case Study : Our #SVG Icon Process Cloud Four Blog
▻http://blog.cloudfour.com/our-svg-icon-process
SVG’s versatility empowers us to craft the most appropriate solution for our audience and use-case. So as much as I’d like to, I can’t say exactly how you should implement SVG icons in your next project. There’s no substitution for research and tryi… Tags: #processus #picto #grunt #gulp SVG #clevermarks
En lien avec, puisque ce sont les mêmes :
►http://seenthis.net/messages/433569
Mais je persiste : je ne trouve pas ça bien d’avoir à insérer des images (SVG ou pas peu importe) de décoration, dans le HTML. Pour moi c’est typiquement un truc uniquement propre au thème graphique du moment, et qui doit pouvoir être changé juste en changeant les choix graphiques, sans toucher aux templates.
@rastapopoulos si tu les gères à l’extérieur et que c’est juste ton processus de packaging/déploiement qui les met dans le HTML, ça ne te suffit pas ? ;-)
oui ça c’est encore autre chose… avec un post-processeur ?
Du coup qu’appelles-tu les gérer à l’extérieur ? Dans ton HTML tu as par exemple des classes CSS classiques, par exemple class="bouton precedent", et ensuite comme tu dis que sur cet élément tu veux le décorer avec un pictogramme SVG ?
Oui, par exemple, et du coup une tâche (npm, Grunt, Gulp, whatever) prend le HTML, injecte le sprite SVG au début, puis des <use> aux bons endroits.
Oui, je comprends bien le principe du post-processing, ya pas de problèmes… mais ma question c’était plus, comme tu gères concrètement le fait de dire que tu veux tel pictogramme de décoration devant le texte de tel bouton ayant telle classe ? Où et comment tu décris ça ? C’est un peu une réinvention du CSS quoi ?… :D
Ah mais on ne s’est pas compris, comme eux je dis que "because our icons represent or reinforce content, they should exist in markup", donc ce n’est pas (complètement) de la décoration, donc pas du ressort de CSS.
Si tu regardes le source de ►http://play.esviji.com tu verras au tout début du <body> un sprite SVG qui contient des boutons que j’utilise après dans l’interface. Pour l’instant le sprite est en dur dans le HTML initial, mais j’ai prévu de l’externaliser dans les sources, pour qu’il ne soit inclus qu’à la « compilation ».
Ah oui mais moi je dis clairement l’inverse, que « une flèche vers la gauche », c’est une décoration pour un bouton « précédent ».
Une loupe c’est une décoration pour un bouton « rechercher ».
Etc etc. Donc ce n’est pas du tout du contenu (pour moi).
(Et une icône toute seule sans aucun label, c’est quasiment à coup sûr très mal.)
Après si le post-proc sert « juste » à dire qu’on transforme le span class « icone loupe » en lui assignant un SVG de loupe, évidemment là le truc est déjà dans les balises. Bon au moins ça permet de changer l’icône si le thème graphique change, sans toucher aux balises.
Mais pour moi c’est le fait même de dire d’aller chercher une icône de « flèche vers la droite » qui ne fait pas partie du contenu (et qui peut très bien changer).
Je comprends ta réticence de puriste, on pourrait continuer sans fin… ;-)
Une icône toute seule sans aucun label, c’est parfois nécessaire, et avec le SVG inline, ça peut être complètement accessible.
Hihi oui je sais. :D
Pour l’accessibilité, oui et non : pour moi l’accessibilité ce n’est pas QUE une histoire de lecteur d’écran (et là oui on peut lui faire lire un label, etc). Même si t’as des yeux, une icône toute seule, il y a un grand nombre de cas où le sens n’est potentiellement pas immédiat à beaucoup trop de monde, car il n’y a pas de standard. Ça fait trop d’apprentissage, trop lent, et donc ce n’est bon ni pour les gens qui ont un handicap de compréhension (il y a des handicaps cognitifs), ni pour l’optimisation des « conversions » dans un contexte marketing.
Les tests A/B sur hamburger seul VS mot « menu » le montrent assez bien. Et « Try Icon Labels instead of opening for interpretation. »
▻http://goodui.org/index.html#47
Je connais bien le problème du hamburger comme seule représentation du menu, effectivement. Nous sommes d’accord que c’est de l’accessibilité au sens cognitif, mais donc plus largement de l’UX pour tout le monde.
Mais imagine mettre des labels sur tous les boutons d’un WYSIWYG par exemple… :-p
SVGnest.
Un logiciel qui utilise un algorithme génétique pour agencer au mieux tous les éléments d’un SVG. Très utile pour préparer des pièces à découper sur une surface donnée. Il résout, d’une certaine manière, le problème dit du "sac à dos".
▻https://github.com/Jack000/SVGnest
#SVG
#Sozi is a zooming presentation editor and player.
Unlike in most presentation applications, a Sozi document is not organised as a slideshow, but rather as a poster where the content of your presentation can be freely laid out. Playing such a presentation consists in a series of translations, zooms and rotations that allow to focus on the elements you want to show.
(un peu comme prezi, mais #logiciel_libre ; #animation #SVG)
Peter Selinger : Potrace
▻http://potrace.sourceforge.net
Potrace is a tool for tracing a #bitmap, which means, transforming a bitmap into a smooth, scalable image. The input is a bitmap (PBM, PGM, PPM, or BMP format), and the default output is an encapsulated PostScript file (EPS). A typical use is to create EPS files from scanned data, such as company or university logos, handwritten notes, etc. The resulting image is not “jaggy” like a bitmap, but smooth. It can then be rendered at any resolution. Potrace can currently produce the following output formats: EPS, PostScript, PDF, #svg (scalable #vector graphics), DXF, #geojson, PGM (for easy antialiasing of pixel-based #images), Gimppath, and XFig. Additional backends might be added in the future.
via ▻http://blog.thematicmapping.org/2015/12/mapping-real-time-snow-cover.html
à comparer à #smillaenlarger
▻http://seenthis.net/messages/188544
pour l’utilisation avec geojson :
▻http://blog.imagico.de/new-potrace-version-with-geojson-backend
Ha je ne l’avais pas vu celui là, merci pour le ping @fil :)
Quel est le problème avec #inkscape après import du bitmap ?
#svg #logiciel_libre
EDIT : J’ai vu que potrace est intégré dans Inkscape. Ben. Merci.
▻http://imgh.us/i_1.svg
Seriously, use icon fonts | Ben Frain
▻http://benfrain.com/seriously-use-icon-fonts
Je continue à privilégier #SVG tant que possible… Tags : #icone #fonte SVG #comparaison #clevermarks
C’est une réponse à cet article :
►http://seenthis.net/messages/433569
#intégration #HTML #CSS
eugene1g/font-blast · GitHub
▻https://github.com/eugene1g/font-blast
You can use font-blast to extract icons from any icon font - Font Awesome, Foundation, anything from Fontello etc. Font-blast will use the “super-font.svg” file to generate individual #SVG/PNG files for each icon. Tags: SVG #icone #fonte #extraction #clevermarks
Rune Madsen
▻http://printingcode.runemadsen.com
Printing Code is a graduate course focused on programming #design systems. Class time is divided between design topics like color, grid systems, and typography, and more computational topics like randomization, repetition, transformation and generati… Tags: #cours design #graphisme #typographie #programmation #grille #éducation #clevermarks #SVG
Toujours ce problème de drogue chez les gens qui nous font les normes (et qui les implémentent dans les navigateurs)…
Ma découverte du jour (et hop, une journée de boulot perdue), c’est que <base>
est quasiment incompatible avec les mask
et les clip-path
de <svg>
.
En effet, pour utiliser un masque dans svg, on l’appel par un url[#masque]
(parenthèses, ici, j’ai mis des crochets sinon Seenthis lui-même modifie l’« url »…) ; si tu ajoutes <base href=…>
à ta page, ce url[#masque]
ne fonctionne plus, puisque la base
l’a expédié à perpèt.
La solution dans ce cas, c’est de ne plus utiliser url[#masque]
mais un truc du genre url[tapage.html#masque]
. Déjà ça complique bien. Transposé dans SPIP, c’est une plaie, rien que lorsque tu recalcule une page son URL a changé et le truc ne fonctionne pas.
Et le meilleur : ça ne fonctionne pas sous IE.
Bref… la solution à la fin de la journée, c’est de changer les URL du site sous SPIP et de renoncer à « URL arborescentes » et de passer en « URL libres ». Et comme ça : pas d’injection de <base>
dans la page.
the new code – Making And Deploying #SVG Favicons
▻http://thenewcode.com/28/Making-And-Deploying-SVG-Favicons
Tags : #favicon SVG
Coloring SVGs in #CSS #background Images by Noah Blon on CodePen
►http://codepen.io/noahblon/post/coloring-svgs-in-css-background-images
Tags : #SVG background CSS #couleur #clevermarks