svg

dessins svg (Scalable Vector Graphics)

red1.svg

<svg width="320" height="240" xmlns="http://www.w3.org/2000/svg">
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
<g>
<title>Calque 1</title>
<ellipse ry="19" rx="24" id="svg_1" cy="136" cx="206" stroke-width="5" stroke="#000000" fill="#FF0000"/>
<path id="svg_2" d="m213,168l46,-17l9,16l-39,12l-1,32l-51,1l-3,-25l-37,-22l10,-18l36,19l30,2z" stroke-width="5" stroke="#000000" fill="#FF0000"/>
</g>
</svg>
- l'image suivante depuis le code source

- l'image suivante est un .jpg

- l'image suivante est un .png

(2.7Ko, avec transparence) ici en 320x240
puis via fotoflexer.com changer la taille!! pour faire x icones

framavectoriel.org/svg-editor.html editeur online puis export .png
la-cascade.io/ travailler avec des icones en svg
jakearchibald.github.io/svgomg online SVG viewer
svgrepo.com 300000 vectors+icons in collections

test2018 (batterie, vtt Icons8, mammut ...)
globe (rotate) D3JS + .json .... cors pb if not http
globe2 (rotate) D3JS + .json (v2020)
globe (pseudo rotate, avec poisson) 42Ko (i)
http://planetaryjs.com/ encore mieux!
runner-silhouette-svgrepo-com.svg
two-dog-pawprints-svgrepo-com.svg
vtt.svg

logo lapin (h1 et a href)


vtt.svg avec un CSS class

vtt.svg avec un CSS class .logo-img2 {filter: invert(.5);}

vtt2.svg avec un CSS class .logo-img {fill: #444; }
^ src du .svg modifié pour avoir un style (que l'on peut maintenant modifier via une class)

avec un CSS class .logo-img2 {filter: invert(.5);}

juste un div


colored


wikidata

dans map.js
fill #16AFD1 = bleu clair


fill #307199 = bleu foncé

carte monde (svg)
carte monde (svg) div. autres exemples

copie locale des drapeaux du monde (autre version)... All country flags in SVG
avec 256 drapeaux (tot=3Mb)
src: hjnilsson/country-flags