5139 sujets

Le Bar du forum

Integrer une infographie sur son site - Pas en image

Bonjour tout le monde !

Je serais intéressée par intégrer des infographies sur Pinterest (en image) et aussi sur mon site. Pour accélérer le SEO, je ne veux pas intégrer l'image de l'infographie mais trouvé un moyen (software) sans devoir coder et insérer le "code" de l'infographie dans notre blog.

Vous connaissez un moyen ?
Modérateur
svg Smiley cligne

- inkscape (vraiment très bien. Rien à envier par rapport à Illustrator)
- Illustrator (très bien mais un peu cher pour faire du digital.... ....)

Sinon, pour mettre les mains dans le cambouis et écrire des ligne de code en svg, un édteur de texte comme Atom, sublime, notepad++, etc.
Modifié par niuxe (09 Aug 2017 - 08:39)
Administrateur
Hello,

Je rajouterais Gravit Designer (https://www.designer.io/) qui est gratuit et que je teste avec bonheur depuis une dizaine de jours.
Ca à l'air pas mal du tout en effet ce logiciel qui plus est gratuit et cross plateformes. J'espère qu'il fait des svg plus standards que ceux de sketch.
Modérateur
Raphael a écrit :
Hello,

Je rajouterais Gravit Designer (https://www.designer.io/) qui est gratuit et que je teste avec bonheur depuis une dizaine de jours.


Pas mal du tout si on veut faire des formes simples ou des illustrations simples (sans qu'il y ait des effets) :

- cross plateform. Je pensais que j'allais devoir compiler ou ajouter un dépot tiers (#zypper ar <adresse-du-depot>). En fait, c'est un soft standalone Smiley smile

Pour les personnes qui sont sur un Unix-like comme moi et qui veulent l'intégrer dans le système.
<<<EDIT
Notre ami Zelena m'a confié que sur son système, ça ne fonctionne pas. En faisant différemment, je pense que ça doit fonctionner. Ainsi, je mets à jour ce post Smiley smile

- passer en super admin root

$su

ou pour les gens sur Ubuntu

$sudo su

- obtenir l'archive en ligne de commande

#wget  https://designer.gravit.io/_downloads/linux/GravitDesigner.zip


- dezipper

#unzip GravitDesigner.zip

-supprimer l'archive et l'html qui est un peu inutile

#rm GravitDesigner.zip Installation-guide.html

- créer un répertoire où sera héberger le binaire

#mkdir -m 755 /opt/GraphicDesigner/

-déplacer le bin dans le répertoire nouvellement créé

#mv GravitDesigner/GravitDesigner.AppImage /opt/GraphicDesigner/GraphDesigner



- faire le lien dans le système

#ln -s /opt/GraphicDesigner/GraphDesigner /usr/bin/gravitdesigner


revenir en mode simple utilisateur:

#exit

ou le raccourci clavier :

ctrl+d

- lancer le logiciel en console

$gravitdesigner




EDIT;
Normalement, tout se lance et vous pouvez désormais l'intégrer facilement (reconnu par le système) dans votre menu de votre bureau favoris (mate/gnome/kde/unity/xfce/lxde/open box/etc.)
Modifié par niuxe (10 Aug 2017 - 15:28)
Alors je me suis peut etre mal exprimée..
J'ai besoin d'un logiciel en ligne de type Canvas qui me permet de faire l'infographie dont j'ai besoin (features: integrer mes propres icones / utiliser mes propres polices). Puis ensuite avoir un bouton de type "Traduire en HTML" afin que j'utilise / embed ce code sur mon site afin que ca n'affiche PAS mon infographie en <img> mais bel et bien en code <html>.
Modérateur
fanny95 a écrit :
Alors je me suis peut etre mal exprimée..
J'ai besoin d'un logiciel en ligne de type Canvas qui me permet de faire l'infographie dont j'ai besoin (features: integrer mes propres icones / utiliser mes propres polices). Puis ensuite avoir un bouton de type "Traduire en HTML" afin que j'utilise / embed ce code sur mon site afin que ca n'affiche PAS mon infographie en &lt;img&gt; mais bel et bien en code &lt;html&gt;.


C'est ce que nous t'avons suggéré. Les outils dont nous t'avons parlé permettent d'éditer ton infographie pour que celle ci puisse être interpétée comme tu l'entends ( moteur de recherche, accessibilité, etc.). Le SVG est un format génial.
Modérateur
enregistre ce code dans un fichier html et affiche ce fichier dans un navigateur Smiley cligne 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://fonts.googleapis.com/css?family=Sedgwick+Ave+Display" rel="stylesheet">
    <title>Document</title>
</head>
<body>
    <svg version="1.0" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    	 width="330px" height="476px" viewBox="0 0 330 476" style="enable-background:new 0 0 330 476;" xml:space="preserve">
    <style type="text/css">
    	.st0{fill:#7F3F00;}
    	.st1{fill:#FF7F00;}
    	.st2{font-family:'Sedgwick Ave Display';font-size:60px;}
    	.st3{}
    </style>
    <g>
    	<title>Layer 1</title>
    	<path id="path5775" class="st0" d="M102,168.1c0,0-4.8-12.1-18.7-14.5c0,0,21.1,4.8,13.3-13.3l15.1,22.3L102,168.1"/>
    	<path id="path5777" class="st0" d="M128,157.3c0,0-9.1,3-15.1-3c-6-6-6.6-13.3-6.6-13.3s11.5,1.8,14.5-7.2
    		C120.7,133.8,114.1,150.7,128,157.3"/>
    	<path id="path5779" class="st0" d="M136.4,157.9c0,0-15.1-9.7-10.3-25.4c4.8-15.7,15.7-12.1,23.5-12.1c0,0-15.1,11.5-8.5,30.8
    		L136.4,157.9"/>
    	<path id="path5781" class="st0" d="M166,119.3c-10.8,0.9-16.3,3.6-22.9,27.2l10.3-0.6c0,0,18.1-16.3,39.8-20.5
    		C193.2,125.3,187.1,117.5,166,119.3"/>
    	<path id="path5783" class="st0" d="M160,145.3c0,0,22.3,1.8,18.1,12.1c0,0,36.8-15.1,74.9,7.8C252.9,165.2,239,118.1,160,145.3"/>
    	<path id="path5785" class="st0" d="M191.9,167c-4.3-1.3-2-3.8-6.6-4.8c0,0,93-7.2,103.2,60.4C288.5,222.5,257.8,186.1,191.9,167"/>
    	<path id="path5787" class="st0" d="M182.3,169.4c0,0,63.4,5.9,90.5,58.6c21.7,42.3,10.9,38,43.5,59.2c0,0-8.5,13.9-33.2-0.6
    		c0,0-3,28.4-32,47.7c0,0,17.5-57.3-26.6-89.3c0,0,41.7,88.1-16.9,123.1c0,0,10.3-114.7-30.2-151.5c0,0,29,15.1,31.4,30.8
    		c0,0,4.2-26-29.6-48.9c0,0,6.6-3.6,6.6-8.4c0,0,14.5,3,20.5,7.8c0,0-8.4-15.1-23.5-15.7L182.3,169.4"/>
    	<path id="path5789" class="st1" d="M214.3,198.4c0,0,44.7,41.7,44.7,82.1C259,280.5,269.2,225,214.3,198.4"/>
    	<path id="path5791" class="st1" d="M156.3,160c-2.7-1.8-7.5-3.6-9.6,5.8l-5.4,0.6c0,0,3.2-19,19-16c2.3,0.4,8.6,5.2,9.8,8.8
    		c2.4,7.7,2.2,7.3-0.4,27.7c-0.7,5.7-12.7,12.1-16.3,9.1c-3.6-3,3.6-4.8,3.6-4.8l1-25.2C158,166,157.4,160.8,156.3,160"/>
    	<path id="path5793" class="st0" d="M57.6,241.8c-1.6-0.1-1,1.3-2.9,1.4c-1.9,0.1-1.9-1.8-4-2.4c-1.8-0.6-4.1,0.9-5.9-0.6
    		c0,0,8.1,12.5,12.2,11.8c0,0,4.1,0.7,9-12.4C65.9,239.5,61.6,241.9,57.6,241.8"/>
    	<path id="path5795" class="st0" d="M168,218.1c0,0,48.3,73.1,28.3,122.1c-20,49-24.1,79.9,4.8,86.9c0,0-57.9-4.8-31.7-89.7
    		C192.2,263.7,168,218.1,168,218.1"/>
    	<path id="path5797" class="st0" d="M135.6,290.6c0,0,25.5-19.3,26.2-22.8c0,0,13.4,33.9-9.2,84.3c-22.6,50.3,5.1,75,31.5,84.6
    		c0,0-75,3.1-53.1-79.4C147.2,296.2,135.6,290.6,135.6,290.6"/>
    	<path id="path5799" class="st0" d="M90.6,311.3c0,0,22.6,7.9,36.3-20.9c0,0,11.6,27.7-3.8,76.7c-18.8,59.7,20.9,83.2,47.3,91.1
    		c0,0-94.5-8.2-65.1-114.4c0,0-49.7,43.5,15.8,107.9c0,0-74.7-29.1-45.2-104.8c0,0-18.8-1.4-20.2-14c0,0,32.9,7.9,51.7-13
    		C107.4,319.9,96.4,320.5,90.6,311.3"/>
    	<path id="path5801" class="st1" d="M157.5,208.7c-8.5-0.6-11.5-11.5-11.5-11.5c-19.9,16.3-33.9,7.7-33.9,7.7s3.4-0.8,14.2-3.8
    		c10.9-3-3.3-11.2-3.9-17.2c-0.6-6,10.3-14.5,10.3-14.5s0.3-1.8-3.2-3.2c-1-0.4,0.2-3.4-1.6-4c-7.2-2.4-27.8,7.2-34.4,17.5
    		c-2.2,3.4-4.6,7.1-6.7,10.4c1.7,2.7,5.2,3.5,12-6.1c0,0-2.9,14.5-17.2,15.7c3.4,5.6,4.7,15.1,18.3,3.2l5.2,1.7
    		c0,0-18.3,5.8-10.5,14.2c0,0-10.5-5.5-16.5-16.2c-38.5,28.4-32.4,36-32.4,36c20.5,5.4,22.4-4,22.4-4c3.6,15.7-11.5,18.7-11.5,18.7
    		c-0.6,4.2,2.4,9.1,2.4,9.1c8.7,1.1,13.9,2.3,16.9,3.3C86.5,269,88,275.8,88,276.6c0,1.5-1,2.1-1.5,1.9c-0.7-0.2-8.1-8-8.1-8
    		L57,269.9c0.3,16.5,13,22.1,13,22.1c-3-1.8,0.6-7.2,0.6-7.2c4.2,8.5,7.8,4.2,7.8,4.2l1.2-9.1c6.6,16.3,26,7.2,18.1-3
    		c-6.3-8.2-1.4-14.8,0.8-17.2c2.1-3.3,7.2-7.6,19.9-8.7c0.1,0,0.2,0,0.2,0c-0.1,0-0.1,0-0.2,0c-1.3,0.1-10.4,1.3-13.3,7.1
    		c33.4-2.5,15.5,24.8,15.5,24.8c39.8-21.7,18.1-59.2-1.2-47.7c-19.3,11.5-27.8-12.7-27.8-12.7c9.7,20.5,26,8.5,29.6,4.2
    		c3.6-4.2,26.6-12.7,29,8.5c2.4,21.1,12.1,13.9,12.1,13.9C159.9,234,157.5,208.7,157.5,208.7"/>
    </g>
    <text transform="matrix(1 0 0 1 81.743 77)" class="st2 st3">NIUXE</text>
    </svg>
</body>
</html>

Modifié par niuxe (09 Aug 2017 - 14:46)
Sujet clos
Aller à