Comprendre SVG viewBox et viewport
▻https://la-cascade.io/comprendre-svg-viewbox-et-viewport
Un 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-SVG
La 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-sanitizer
Librairie 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 posts
Et 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#MIMEType
mime-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
The Different Ways of Getting SVG Out of Adobe Illustrator | CSS-Tricks
▻https://css-tricks.com/illustrator-to-svg
Pour tous les infographistes qui tentent de sortir du SVG pour le web avec Illustrator et te refilent des trucs abominablement inadaptés...
Browser support for SVG symbol sprites
▻https://fvsch.com/code/svg-icons/symbol-sprite
#SVG_symbol_sprite_browser_compatibility_clevermarks
Super Tiny Website Logos in SVG
▻https://shkspr.mobi/blog/2017/11/super-tiny-website-logos-in-svg
▻https://github.com/edent/SuperTinyIcons
You may not realise it, but #bandwidth is expensive. It costs you time, money, and battery power whenever you download a file larger than it needs to be.
That’s why I’ve become a little bit obsessed with #SVG - Scalable Vector Graphics. They’re the closest thing to magic that the web has when it comes to image compression. Let me show you what I mean.
This is the standard Twitter #Logo. It’s 512 * 512 pixels and, even with hefty #PNG compression, weighs in at around 20KB.
Here’s the same logo rendered as an SVG. Because it is a vector graphic it can be magnified infinitely without any loss of fidelity.
The uncompressed SVG is a mere 397 Bytes. Not a #typo. You could fit over 3,000 of these images on a floppy disk.
That’s why I have released SuperTinyIcons on GitHub. Eighty of the web’s most popular logos - each image is under 1KB.
Optimiser les images et réduire leur poids : formats, outils et RWD
▻https://blog.dareboost.com/fr/2017/10/optimiser-les-images-et-reduire-leur-poids-formats-outils-et-rwd
Au moment de l’enregistrement en JPEG, la plupart des logiciels demandent quelle qualité conserver, car il s’agit d’un format d’encodage avec pertes. En choisissant une qualité inférieure à 100%, il est ainsi possible d’économiser de précieux octets en modifiant uniquement certains points de l’image. Essayons avec notre image, en qualité 80%. Le résultat est très intéressant avec un gain de poids de plus de 50%, alors que seuls quelques points de l’image ont été modifiés en profondeur.
▻https://jmperezperez.com/svg-placeholders
Un inventaire des techniques utilisant #SVG pour rendre le chargement différé d’images plus satisfaisant perceptuellement.
Avec liens vers divers outils pour pré-traiter les images.
Très sympa !
▻https://res.cloudinary.com/jmperez/video/upload/dpr_auto,f_auto,q_auto,c_scale/v1509278615/silhouette-lazy-loading_evq9xq.mp4
@tetue Par quoi remplacer une image durant son chargement.
Augmenter la pertinence du parcours visuel rapide par l’internaute d’une page web en cours de chargement ?
Et sur le plan esthétique, ça peut parfois être assez réussi, je trouve.
Potrace en PHP :
▻https://github.com/nystudio107/craft3-imageoptimize/blob/master/src/lib/Potracio.php
(et je découvre Craft CMS du coup qui a pas l’air mal du tout)
En fait le dépôt avec la lib à jour pour PHP, pas dans craft :
▻https://github.com/Otamay/potracio
70 CSS text effects
▻http://freefrontend.com/css-text-effects
Collection of HTML and CSS text effects with little JavaScript: 3D, animated, glitch, hover, shadow, rotating and typing. Demo and download code (*zip).
Pas testé (à cette heure, j’ai codepen.io qui ne charge pas les pages).
#html #css #typographie #javascript #svg
Essential Image Optimization
►https://images.guide
We should all be automating our image compression.
Méthodes pour l’optimisation automatique des images d’un site web. Traite des nombreux nouveaux formats de compression : MozJPEG, Guetzli, WebP...
#image #compression #optimisation #jpg #png #svg #qualité #gulp
GitHub - darylldoyle/svg-sanitizer : A PHP SVG/XML Sanitizer
►https://github.com/darylldoyle/svg-sanitizer
Utilitaire PHP de « sanitization » des fichiers SVG
Voir aussi : ►https://github.com/darylldoyle/svg-sanitizer (qui ne semble pas maintenu depuis 2013...)
Mise à jour 11/2018 : le développement semble repris depuis quelques mois
Utilisé par le plugin Wordpress ▻https://wordpress.org/plugins/safe-svg
et le plugin Drupal ▻https://www.drupal.org/project/svg_sanitizer
En relation avec le ticket du core de SPIP ▻https://core.spip.net/issues/3482
#svg #svg-sanitizer #SPIP
Je l’ai ajouté dans le plugin #logo_svg de #SPIP ici : ▻https://github.com/cahri/spip-logo-svg
pour mémoire : un aperçu des failles possibles lors de l’utilisation de SVG dans une page web :
▻https://www.blackhat.com/docs/us-14/materials/us-14-DeGraaf-SVG-Exploiting-Browsers-Without-Image-Parsing-Bugs.pdf
GitHub - jkphl/svg-sprite: SVG sprites & stacks galore — A low-level Node.js module that takes a bunch of SVG files, optimizes them and bakes them into SVG sprites of several types along with suitable stylesheet resources (e.g. CSS, Sass, LESS, Stylus, etc.)
▻https://github.com/jkphl/svg-sprite
Module node.js pour génération automatisée de sprites SVG.
Gradients in are invisible if symbol svg is display: none
▻https://github.com/emilbjorklund/svg-weirdness/issues/12
#SVG_use_symbol_gradient_displayNone
Using SVG | CSS-Tricks
▻https://css-tricks.com/using-svg/#article-header-id-17
Différentes méthodes pour utiliser des SVG en image-background.
Voir aussi :
– un exemple simple en inline non-compressé : ▻https://codepen.io/netsi1964/pen/HGJms
– ▻http://helephant.com/2009/08/12/svg-images-as-css-backgrounds
– les options de manipulation du fichier selon les attributs dans le SVG : ▻https://developer.mozilla.org/en-US/docs/Web/CSS/Scaling_of_SVG_backgrounds
Pixel Map Generator | amCharts
▻https://pixelmap.amcharts.com
Un générateur de cartes du monde sous forme de pixels avec une interface de configuration pour choisir la taille des points, la projection, le pays, le format de sortie (images/html/vectoriel)...
La version SVG intègre un attribut aria-label="nom-du-pays" pour chaque point, permettant de cibler un pays en particulier en CSS ou javascript.
(il manque quand même l’option de configuration qui permettrait de pouvoir définir le centre géographique de la carte)
#cartographie #pixel #svg #monde #interaction #pays #pixelmap #générateur
Zahra Jabini : Sequential Art, Comics & SVGs | JSConf EU 2017
▻https://www.youtube.com/watch?v=LXgmD6kGkmI
#SVG #3D #Illustrator très chouette conférence
Me and SVG by Amelia Bellamy-Royds
▻https://codepen.io/AmeliaBR/post/me-and-svg
I’ve spent three and a half years becoming an expert, maybe the expert on SVG on the web. On all its features, and all its bugs. On the workarounds that sort of work for now, and on the proposals for better solutions, if they ever get implemented. But I never cared about SVG itself. It’s just a tool. I cared about what I could build with it.
But I hate working with broken tools.
Do I keep trying to fix it, or do I throw it away?
Let’s draw a coastline – Fantasy Maps for fun and glory
▻https://azgaar.wordpress.com/2017/04/03/lets-draw-a-coastline
We already got scalable Voronoi graph and heightmap on it. The next step is to draw a coastline that will make the border between water a land masses clearer.
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
