#svg

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

▻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

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

[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

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 #icône

Support des images SVG : |balise_img ne cherche pas a calculer une wi… · spip/SPIP 46d394b
▻https://github.com/spip/SPIP/commit/46d394be6a8d076b530d2a7a71ed6adfc619188f

|balise_svg permet d’inserer le SVG inline avec ou sans alt

#SVG #SPIP

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

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

Un 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-sprite

Utilise 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

#SVG #gulp #sprite #SVGO #optimisation

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

La doc de la balise #ICON du plugin z-core de SPIP : permet d’utiliser des sprites SVG inclus « inline » dans la page aussi bien qu’externes
merci cedric !

#SVG #SPIP ##ICON #sprite #z-core

Using SVG | CSS-Tricks
▻https://css-tricks.com/using-svg

Synthèse complète de toutes les méthodes pour intégrer du SVG dans une page web

#SVG #CSS #web_dev

Remix Icon - Open source icon library
▻https://remixicon.com

Remix 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 fonction filtre_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)

▻https://zone.spip.net/trac/spip-zone/changeset/114892

#spip #zcore topito :)

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

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

#SVG #référence #SPIP #carnet_contrib

GitHub - darylldoyle/svg-sanitizer : A PHP SVG/XML Sanitizer
►https://github.com/darylldoyle/svg-sanitizer

Librairie PHP pour sécuriser les SVG

#SVG #svg-sanitizer #SPIP #safe-html #sanitize

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 ?)

#SVG #windows #explorateur #visualisation

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

#svg #spécification #mime-type

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

#SVG #optimisation #illustrator #infographie

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.

#images #jpg #svg #png #webP

▻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/image/upload/w_auto,f_auto,c_scale/v1509278557/jmperez-composition-primitive_j8zyfn.jpg

▻https://res.cloudinary.com/jmperez/video/upload/dpr_auto,f_auto,q_auto,c_scale/v1509278615/silhouette-lazy-loading_evq9xq.mp4

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

untitled - Vectr
▻https://vectr.com/tmp/e9WTxydtD/b1CMECJElb

Version en ligne (et intégrable dans une page web) de l’éditeur SVG Vectr

#svg #éditeur #outil #enligne #vectr #inkscape