Transformer un logo en code html (balise svg)

[falbayrak]

Bonjour,

Après quelques heures de recherche sur internet, je me tourne vers les forums pour trouver une réponse.

J'ai actuellement un logo transparent en PNG.

Pour éviter de refaire le logo sous format svg, j'aimerais convertir mon logo PNG en code html sous balise svg path.

Est-ce qu'il existe un logiciel permettant de réaliser cette transformation ?

Voici un exemple de ce que je souhaite obtenir (logo airbnb) :

<h1 class="logo">

<svg xmlns="http://www.w3.org/2000/svg" xmlnslink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 320.1 99.9" enable-background="new 0 0 320.1 99.9" xml:space="preserve">

<path fill="#FF5A5F" d="M168.7,25.1c0,3.6-2.9,6.5-6.5,6.5s-6.5-2.9-6.5-6.5s2.8-6.5,6.5-6.5C165.9,18.7,168.7,21.6,168. 7,25.1z M141.9,38.2c0,0.6,0,1.6,0,1.6s-3.1-4-9.7-4c-10.9,0-19.4,8.3-19.4,19.8c0,11.4,8.4,19.8,19.4 ,19.8c6.7,0,9.7-4.1,9.7-4.1v1.7 c0,0.8,0.6,1.4,1.4,1.4h8.1V36. 8c0,0-7.4,0-8.1,0C142.5,36.8,141.9,37.5,14 1.9,38.2z M141.9,62.3c-1.5,2.2-4.5,4.1-8.1,4.1 c-6.4,0-11.3-4-11.3-10.8s4.9-10.8,11.3-10.8c3.5,0,6.7,2,8.1,4.1V62.3z M157.4,36.8h9.6v37.6h-9.6V36.8z M300.8,35.8 c-6.6,0-9.7,4-9.7,4V18.7h-9.6v55.7c0,0,7.4,0,8.1,0c0.8,0 ,1.4-0.7,1.4-1.4v-1.7l0,0c0,0,3.1,4.1,9.7,4.1c10 .9,0,19.4-8.4,19.4-19.8 C320.1,44.2,311.6,35.8,300.8,3 5.8z M299.2,66.3c-3.7,0-6.6-1.9-8.1-4.1V48.8c1.5-2,4.7-4.1,8.1-4.1c6.4,0,11.3,4,11.3,10.8 S305.6,66.3,299.2,66.3z M276.5,52.1v22.4h-9.6V53.2c0-6.2-2-8.7-7.4-8.7c-2.9,0-5.9,1.5-7.8,3.7v26.2h-9.6V36.8h7.6 c0.8,0,1.4,0.7,1.4,1.4v1.6c2.8-2.9,6.5-4,10.2-4c4.2,0,7.7,1.2,10.5,3.6C275.2 ,42.2,276.5,45.8,276.5,52.1z M218.8,35.8 c-6.6,0-9.7,4-9.7,4V18.7h-9.6v55.7c0,0,7.4,0,8.1,0c0.8,0 ,1.4-0.7,1.4-1.4v-1.7l0,0c0,0,3.1,4.1,9.7,4.1c10 .9,0,19.4-8.4,19.4-19.8 C238.2,44.2,229.7,35.8,218.8,3 5.8z M217.2,66.3c-3.7,0-6.6-1.9-8.1-4.1V48.8c1.5-2,4.7-4.1,8.1-4.1c6.4,0,11.3,4,11.3,10.8 S223.6,66.3,217.2,66.3z M191.2,35.8c2.9,0,4.4,0.5,4.4, 0.5v8.9c0,0-8-2.7-13,3v26.3h-9.6V36.8c0,0,7.4,0,8.1,0 c0.8,0,1.4,0.7,1.4,1.4v1.6C184 .3,37.7,188.2,35.8,191.2,35.8z M91.5,71c-0.5-1.2-1-2.5-1.5-3.6c-0.8-1.8-1.6-3.5-2.3-5.1l-0.1-0.1 c-6.9-15-14.3-30.2-22.1-45.2l-0.3-0.6c-0.8-1.5-1.6-3.1-2.4-4.7c-1-1.8-2-3.7-3.6-5.5C56,2.2,51.4,0,46.5,0c-5,0-9.5,2.2-12.8,6 c-1.5,1.8-2.6,3.7-3.6,5.5c-0.8,1.6-1.6,3.2-2.4,4.7l-0.3,0.6C19.7,31.8,12.2,47,5.3, 62l-0.1,0.2c-0.7,1.6-1.5,3.3-2.3,5.1 c-0.5,1.1-1,2.3-1.5,3.6c-1.3,3.7-1.7,7.2-1.2,10.8c1.1,7.5,6.1,13.8,13,1 6.6c2.6,1.1,5.3,1.6,8.1,1.6c0. 8,0,1.8-0.1,2.6-0.2 c3.3-0.4,6.7-1.5,10-3.4c4.1-2.3,8-5.6,12.4-10.4c4.4,4.8,8.4,8.1,12.4,10.4 c3.3,1.9,6.7,3,10,3.4c0.8,0.1, 1.8,0.2,2.6,0.2 c2.8,0,5.6-0.5,8.1-1.6c7-2.8,11.9-9.2,13-16.6C93.2,78.2,92.8,74.7,91.5, 71z M46.4,76.2c-5.4-6.8-8.9-13.2-10.1-18.6 c-0.5-2.3-0.6-4.3-0.3-6.1c0.2-1.6,0.8-3,1.6-4.2c1.9-2.7,5.1-4.4,8.8-4.4c3.7,0,7,1.6,8.8,4.4c0.8,1. 2,1.4,2.6,1.6,4.2 c0.3,1.8,0.2,3.9-0.3,6.1C55.3,62.9,51.8,69.3,46 .4,76.2z M86.3,80.9c-0.7,5.2-4.2,9.7-9.1,11.7c-2.4,1-5,1.3-7.6,1 c-2.5-0.3-5-1.1-7.6-2.6c-3.6-2-7.2-5.1-11.4-9.7c6.6-8.1,10.6-15.5,12.1-22.1c0.7-3.1,0.8-5.9,0.5-8.5c-0.4-2.5-1.3-4.8-2.7-6.8 c-3.1-4.5-8.3-7.1-14.1-7.1s-11,2.7-14.1,7.1c-1.4,2-2.3,4.3-2.7,6.8c-0.4,2.6-0.3,5.5,0.5,8.5c1.5,6.6,5.6,14 .1,12.1,22.2 c-4.1,4.6-7.8,7.7-11.4,9.7c-2.6,1.5-5.1,2.3-7.6,2.6c-2.7,0.3-5.3-0.1-7.6-1c-4.9-2-8.4-6.5-9.1-11.7c-0.3-2.5-0.1-5,0.9-7.8 c0.3-1,0.8-2,1.3-3.2c0.7-1.6,1.5-3.3,2.3-5l0.1-0.2c6.9-14.9,14.3-30.1,22-44.9l0.3-0.6c0.8-1.5,1.6-3.1,2.4-4.6 c0.8-1.6,1.7-3.1,2.8-4.4c2.1-2.4,4.9-3.7,8-3.7c3.1,0,5.9,1.3,8,3.7c1.1,1. 3,2,2.8,2.8,4.4c0.8,1.5,1.6,3. 1,2.4,4.6l0.3,0.6 C67.7,34.8,75.1,50,82,64.9L82, 65c0.8,1.6,1.5,3.4,2.3,5c0.5,1 .2,1,2.2,1.3,3.2C86.4,75.8,86. 7,78.3,86.3,80.9z"/>

</svg>

</h1>

S'il existe une meilleur solution tout en optimisant, je suis à votre écoute.

Je vous remercie d'avance pour votre aide.
-----

[CM63]

Il y a des convertisseurs en ligne, comme par exemple celui-la : https://image.online-convert.com/fr/convertir-en-svg , je ne l'ai pas essayé, regarde si il est sérieux.

[falbayrak]

Je souhaite remplacer le code du logo de airbnb par mon propre logo et je n'arrive pas à l'afficher.
Voici ce que j'obtiens pour mon logo (après conversion) :

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="2128.000000pt" height="921.000000pt" viewBox="0 0 2128.000000 921.000000"
preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.15, written by Peter Selinger 2001-2017
</metadata>
<g transform="translate(0.000000, 921.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M10085 8797 c-303 -222 -1819 -1334 -3370 -2472 -1551 -1138 -2934
-2152 -3072 -2254 -139 -101 -251 -186 -249 -188 16 -17 767 127 1106 212 618
155 963 276 1167 408 170 109 809 572 1742 1261 1039 767 3207 2355 3225 2362
7 3 274 -186 592 -419 508 -372 2430 -1778 3204 -2345 l275 -201 3 1269 2
1270 450 0 450 0 2 -1132 c2 -623 3 -1329 3 -1568 0 -491 0 -490 73 -571 87
-97 187 -131 829 -279 241 -56 642 -151 892 -211 250 -60 456 -107 458 -105 6
6 -238 214 -468 398 -224 179 -467 363 -714 538 -187 133 -252 191 -288 258
-60 110 -57 18 -57 1764 l0 1598 -1205 0 -1205 0 -2 -796 -3 -796 -115 84
c-582 430 -3163 2318 -3168 2318 -4 0 -255 -181 -557 -403z"/>
<path d="M10730 6215 l0 -275 245 0 245 0 0 275 0 275 -245 0 -245 0 0 -275z"/>
<path d="M10070 6210 l0 -270 245 0 245 0 0 270 0 270 -245 0 -245 0 0 -270z"/>
<path d="M10060 5495 l0 -275 250 0 250 0 0 275 0 275 -250 0 -250 0 0 -275z"/>
<path d="M10730 5490 l0 -270 245 0 245 0 0 270 0 270 -245 0 -245 0 0 -270z"/>
<path d="M9870 4144 c-47 -2 -215 -8 -375 -14 -3437 -128 -6692 -870 -9090
-2073 -219 -110 -369 -191 -340 -184 11 3 185 55 386 115 2790 842 5662 1347
8489 1492 522 27 716 32 1455 37 931 6 1460 -6 2255 -52 2780 -164 5600 -681
8384 -1539 99 -31 181 -54 183 -52 9 9 -500 267 -792 401 -1765 812 -3905
1381 -6275 1669 -726 88 -1388 142 -2310 187 -200 10 -1781 20 -1970 13z"/>
<path d="M7105 1591 c-185 -46 -296 -157 -325 -323 -31 -176 65 -341 245 -424
41 -19 152 -55 247 -80 262 -68 324 -107 322 -200 -1 -61 -43 -120 -109 -153
-40 -21 -67 -27 -139 -30 -52 -2 -106 2 -130 9 -92 28 -159 98 -187 200 -7 25
-15 49 -19 53 -7 8 -276 -16 -286 -25 -2 -3 2 -37 11 -76 44 -212 169 -344
375 -399 91 -24 339 -24 430 1 143 38 240 106 301 212 86 151 68 374 -41 498
-75 84 -163 125 -415 192 -93 24 -198 58 -232 73 -120 57 -125 153 -10 213 31
16 65 23 133 26 101 5 150 -6 200 -44 33 -24 74 -99 74 -134 0 -18 7 -20 73
-20 39 0 108 3 153 6 l80 7 -8 64 c-21 179 -157 317 -353 358 -98 20 -300 18
-390 -4z"/>
<path d="M8575 1594 c-120 -26 -209 -76 -302 -169 -131 -132 -188 -276 -200
-505 -18 -333 105 -592 337 -714 112 -59 205 -80 360 -80 152 0 221 14 335 68
249 117 381 383 362 731 -12 220 -72 372 -196 495 -136 135 -284 190 -506 189
-66 0 -151 -7 -190 -15z m345 -267 c78 -29 168 -121 198 -202 62 -168 55 -393
-18 -541 -36 -73 -101 -136 -178 -172 -49 -23 -70 -27 -152 -27 -81 0 -103 4
-151 27 -150 69 -226 202 -236 413 -10 198 35 345 133 435 103 95 259 121 404
67z"/>
<path d="M16022 1595 c-172 -38 -332 -164 -410 -325 -50 -103 -69 -173 -83
-305 -15 -153 5 -329 52 -448 100 -255 357 -411 645 -393 264 17 430 134 524
369 16 42 30 81 30 89 0 9 -49 29 -137 56 -76 24 -141 43 -145 42 -3 0 -14
-24 -23 -52 -67 -207 -248 -299 -431 -219 -129 57 -195 183 -210 399 -12 172
21 330 86 419 114 154 355 171 483 34 24 -26 52 -68 62 -94 10 -26 23 -47 30
-47 13 0 278 61 283 65 6 5 -41 122 -68 170 -36 64 -127 149 -197 188 -117 63
-334 86 -491 52z"/>
<path d="M3130 870 l0 -720 135 0 135 0 1 543 1 542 136 -540 137 -540 146 -3
146 -3 136 538 135 538 1 -537 1 -538 140 0 140 0 0 720 0 720 -223 0 -222 0
-125 -475 c-81 -307 -128 -469 -132 -458 -7 17 -248 919 -248 928 0 3 -99 5
-220 5 l-220 0 0 -720z"/>
<path d="M5207 1583 c-6 -10 -557 -1424 -557 -1429 0 -2 71 -4 159 -4 l159 0
57 160 58 160 283 0 283 0 19 -52 c11 -29 39 -101 62 -160 l41 -108 165 0 164
0 -17 42 c-9 24 -139 347 -288 718 l-272 675 -156 3 c-85 1 -158 -1 -160 -5z
m248 -603 c48 -129 90 -241 92 -247 4 -10 -36 -13 -181 -13 -102 0 -186 2
-186 5 0 4 146 408 169 469 7 16 13 27 15 25 2 -2 43 -110 91 -239z"/>
<path d="M6230 870 l0 -720 150 0 150 0 0 720 0 720 -150 0 -150 0 0 -720z"/>
<path d="M9690 870 l0 -720 140 0 140 0 2 450 3 451 278 -451 279 -450 149 0
149 0 0 720 0 720 -135 0 -135 0 -2 -471 -3 -470 -288 470 -289 471 -144 0
-144 0 0 -720z"/>
<path d="M11690 870 l0 -720 545 0 545 0 0 125 0 125 -400 0 -400 0 0 190 0
190 360 0 360 0 0 125 0 125 -360 0 -360 0 0 155 0 155 390 0 390 0 0 125 0
125 -535 0 -535 0 0 -720z"/>
<path d="M12920 1465 l0 -125 210 0 210 0 0 -595 0 -595 150 0 150 0 0 595 0
595 210 0 210 0 0 125 0 125 -570 0 -570 0 0 -125z"/>
<path d="M14240 870 l0 -720 550 0 550 0 0 125 0 125 -400 0 -400 0 0 190 0
190 360 0 360 0 0 125 0 125 -360 0 -360 0 0 155 0 155 385 0 385 0 0 125 0
125 -535 0 -535 0 0 -720z"/>
<path d="M17020 870 l0 -720 150 0 150 0 0 310 0 310 280 0 280 0 0 -310 0
-310 145 0 145 0 0 720 0 720 -145 0 -145 0 0 -280 0 -280 -280 0 -280 0 0
280 0 280 -150 0 -150 0 0 -720z"/>
</g>
</svg>

[falbayrak]

j'aimerais mette le logo dans la balise header de mon site internet. Et quand je remplace l'ensemble du contenu des balises <svg>, rien ne s'affiche.

[A voir en vidéo sur Futura]

[CM63]

Ouvre la console web et regarde les messages d'erreur.

[umfred]

bizarre, j'ai fait un copier coller de ce que tu as mis dans un bloc-notes, enregistrer en html; et j'ai bien ton logo mais en énorme.
il faut changer les valeurs de width et height (divisé par 10 exemple).

[Ikhar84]

@umfred: normal, tu n'as pas le "squelette" d'un document html complet qui "encadre" ce svg.

Pourquoi il y a un doctype, par exemple ?
Compares les deux "déclarations" des svg !

[polo974]

remplace le début par :

<svg version="1.0"
width="400px" height="200px"
viewBox="0 0 200 100"
>
<g transform="translate(0.000000, 96.000000) scale(.01,-.01)"

tu peux changer la taille :

width="200px" height="100px"

[umfred]

@umfred: normal, tu n'as pas le "squelette" d'un document html complet qui "encadre" ce svg.

Pourquoi il y a un doctype, par exemple ?
Compares les deux "déclarations" des svg !

je l'ai copié en éditant le code source du site avec les outils de développement web de chrome(donc une modification en local), en divisant par 10 et voila le résultat.
ça vient peut-être du navigateur aussi