html2pdf insertion de svg - Page 1

Bonjour à tous et bonjour Spipu,

Dans le cadre d'une application php d'impression d'affiches créées dynamiquement par l'utilisateur, j'utilise html2pdf pour une impression depuis un pdf bien sûr . J'ai besoin d'incorporer des svg, tout d'abord je suis allé sur le wiki et j'ai lu les posts du fofo à ce sujet mais j'ai pas trouvé l'information souhaitée.

Ma question est la suivante:

Comment utiliser les fonctions d'insertion de svg de html2pdf?

Egalement je laisse à l'utilisateur la possibilité de choisir le format et l'orientation du pdf (landscape, portrait, A3, A4, A5, A6). Pour l'instant j'insère une image jpg au format A3 avec un css au coefficient du format choisi. Comment appliquer ce système avec svg?

Merci à tous vos réponses et votre aide.

Si je fais comme ça :

$html2pdf->pdf->ImageSVG($file='../images/testsvg.svg', $x=15, $y=30, $w='', $h='', $link='http://www.tcpdf.org', $align='', $palign='', $border=1, $fitonpage=false);

$html2pdf->pdf->ImageSVG($file='../images/tux.svg', $x=30, $y=100, $w='', $h=100, $link='', $align='', $palign='', $border=0, $fitonpage=false);

?

J'ai fait le test des lignes du précédent post avec le svg suivant:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
<!ENTITY ns_flows "http://ns.adobe.com/Flows/1.0/">
]>
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
x="0px" y="0px" width="595px" height="842px" viewBox="-202.5 -219.5 595 842" enable-background="new -202.5 -219.5 595 842"
xml:space="preserve">
<defs>
</defs>
<ellipse fill="#ED1C24" stroke="#000000" stroke-miterlimit="10" cx="122" cy="53.5" rx="121.5" ry="53"/>
</svg>

et je récupère cette erreur : le fichier ne commence pas par '%PDF-'

J'ai ensuite fait un autre test en modifiant le fichier svg comme ceci


<ellipse fill="#ED1C24" stroke="#000000" stroke-miterlimit="10" cx="122" cy="53.5" rx="121.5" ry="53"/>

Et comme ceci j'obtiens une autre erreur : division par 0

Que dois-je faire?

Bon pour ceux qui comme moi rame un peu avec l'insertion de svg je poste la solution si cela peut servir :

1- faire son image en vectoriel dans illustrator (j'ai fait ça sous illustrator CS5)
2- enregistrer sous(save as) + dans le champ "save as type" choisir SVG(*.svg)
3- une fenêtre "svg options" souvre
4- choisir dans svg profile : SVG1.1
5- choisir dans type : SVG, pour le reste laisser tel quel
6- écrire cette ligne dans votre fichier de création du pdf "$html2pdf->pdf->ImageSVG($file='../chemin/monsvg.svg', $x='position en x en mm', $y='positionnement en y en mm' $w='largeur en mm', $h='hauteur en mm', $link='', $align='', $palign='', $border=0, $fitonpage=false); " positionner cette ligne après celle-ci "$html2pdf->writeHTML($content) ;" sinon le svg ne s'affiche pas.

Cette méthode fonctionne avec tout type de fichier vectoriel(polygone, ellipse, etc...).

Enjoy

ce n'est pas du tout la bonne solution... html2pdf dispose directement de l’intégration du SVG au sein même du HTML, comme montré dans les exemples...

http://html2pdf.fr/example

http://demo.html2pdf.fr/examples/pdf/svg.pdf
http://demo.html2pdf.fr/examples/pdf/svg_tree.pdf
http://demo.html2pdf.fr/examples/pdf/svg_tiger.pdf

Salut,
j'ai le même problème que xess : l'insertion d'un svg ne fonctionne pas directement, car html2pdf ne reconnait qu'une balise <draw> et non pas une balise <svg>
J'ai vérifié tous les exemples svg fournis avec le package, et ils utilisent tous draw.
a+
yo

Salut,

Merci pour les liens spipu mais ils renvoient vers des fichiers pdf pour lesquels on a pas accès au fichier php afin de voir la méthode de création avec la class html2pdf (Effectivement on voit bien des images mais that's all et le wiki v4 svg n'est pas encore renseigné).

As-tu des exemples comme cela était fait avant en version html voir carrément en version php ?

Ceci étant tu as raison! En utilisant les étapes que j'ai décrite précédemment, je fait appel directement à une méthode de tcpdf par le biais de html2pdf. Celle-ci fonctionne et elle a le mérite de distinguer le xml du xhtml et le xml du svg, ce qui pour moi évite la confusion dans mon fichier php qui est conséquent.

Spipu peux-tu nous informer un peu plus quant à la méthode concrète que tu préconises pour l'utilisation des svg dans html2pdf !? Dans tous les cas, merci pour le travail que tu effectues et pour ta présence sur le forum.

comme l'a indiqué yoone, il faut utiliser la balise draw (à la place de la balise svg), et concernant les exemples, ils sont tous dans le zip, dans le répertoire "example"...

Merci Spipu!

Salut,
de retour au boulot, je peux en reparler plus précisément, enfin pour mon cas. J'essaie d'insérer un graphe issu de highcharts (http://www.highcharts.com/), ça donne un svg du style Fichier joint : gfx.svg
Remplacer la balise svg en draw ne suffit pas : le <defs> n'est pas reconnu; en le supprimant aussi (c'est pas bien grave), la lib indique que la balise <rect> n'est pas reconnue non plus ! Je pense qu'il y a un petit souci
Bon c'est dommage, ça m'oblige à insérer de l'image à la place, donc avec les soucis de définitions.
a+ yo

Re Spipu,

Avec pleins de bonne volonté je viens tester la méthode que tu préconises, bon ça ne fonctionne pas...J'ai constater une différence entre mon svg et celui du tiger que tu donnes en exemple.

tiger:

<g style="fill: #ffffff; stroke:#000000; stroke-width:0.172"><path d="M-122.304 84.285C-122.304 84.285 -122.203 86.179 -123.027 86.16C-123.851 86.141 -140.305 38.066 -160.833 40.309C-160.833 40.309 -143.05 32.956 -122.304 84.285z"/></g>

Les informations sont dans un attribut "style"

mon svg:

<g enable-background="new "><path fill="#FFFFFF" d="M26.636,47.17c0-1.6,0.736-2.304,2.304-2.304h5.344c3.583,0,5.823,1.888,5.823,6.495c0,3.647-1.728,6.752-5.471,6.752h3.712v7.999c0,1.344-0.992,2.208-2.144,2.208s-2.144-0.864-2.144-2.208V47.17z M30.923,54.881h1.92c1.92,0,2.784-1.312,2.784-3.327c0-2.4-0.96-3.456-2.56-3.456h-2.144V54.881z"/>
</g>

Voici un svg au plus simple que j'insère dans la page directement au milieu de mon html et rien à faire ça ne veut pas !!!!!
Help please!

<draw style="width:138px;height:83px">
<g style="fill: #FFFFFF">
<path d="M55.068,17.658c0-1.345,0.864-2.208,2.368-2.208c1.344,0,2.208,0.319,2.976,2.176l5.088,12.607h0.064 V17.658c0-1.345,0.992-2.208,2.144-2.208c1.152,0,2.144,0.863,2.144,2.208v19.263c0,1.535-0.992,2.399-2.144,2.399c-1.76,0-2.496-0.384-3.2-2.176l-5.087-12.799h-0.064v12.767c0,1.344-0.992,2.208-2.144,2.208s-2.144-0.864-2.144-2.208V17.658z"/>
</g>
</draw>

Spipu j'ai bien regardé tes svgs et ils ne ressemblent en aucun cas à tous ceux que j'ai pu porduire avec illustration, comment as-tu obtenu de tels svgs ?

Spipu as-tu une réponse à m'apporter !?

c'est des SVGs que j'ai eu direct sur internet.

il faut utiliser les styles. Les propriétés autres sont généralement dépréciés, sont à éviter, et n'ont pas été intégrés dans HTML2PDF.

Salut, le souci que j'ai (et je ne pense pas être le seul) c'est que le svg vient d'une appli tierce (http://www.highcharts.com/) et qu'on ne maîtrise pas son format. Je me suis débrouillé autrement, mais c'est juste dommage.