title: export <svg> in pdf with wkhtmltopdf
body: <p>I use phpwkhtmltopdf by mike haertl (<a href="https://github.com/mikehaertl/phpwkhtmltopdf" rel="nofollow noreferrer">https://github.com/mikehaertl/phpwkhtmltopdf</a>)
  Everything works perfectly and easily.. but I have a HUGE issue. I can export an <code>&lt;img&gt;</code> that plays a .svg but I can't export an <code>&lt;svg&gt;</code>.</p>
  
  <p>For example:</p>
  
  <p>here is the kind of "raw" .svg I receive from the graphic department.</p>
  
  <p><a href="https://i.stack.imgur.com/3VpaW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3VpaW.png" alt="enter image description here"></a></p>
  
  <p>Then to turn .svg to <code>&lt;svg&gt;</code> I use that javascript: </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
              $(function(){
          jQuery('img.svg').each(function(){
              var $img = jQuery(this);
              var imgID = $img.attr('id');
              var imgClass = $img.attr('class');
              var imgURL = $img.attr('src');
  
              jQuery.get(imgURL, function(data) {
                  // Get the SVG tag, ignore the rest
                  var $svg = jQuery(data).find('svg');
  
                  // Add replaced image's ID to the new SVG
                  if(typeof imgID !== 'undefined') {
                      $svg = $svg.attr('id', imgID);
                  }
                  // Add replaced image's classes to the new SVG
                  if(typeof imgClass !== 'undefined') {
                      $svg = $svg.attr('class', imgClass+' replaced-svg');
                  }
  
                  // Remove any invalid XML tags as per http://validator.w3.org
                  $svg = $svg.removeAttr('xmlns:a');
  
                  // Check if the viewport is set, else we gonna set it if we can.
                  if(!$svg.attr('viewBox') &amp;&amp; $svg.attr('height') &amp;&amp; $svg.attr('width')) {
                      $svg.attr('viewBox', '0 0 ' + $svg.attr('height') + ' ' + $svg.attr('width'))
                  }
  
                  // Replace image with new SVG
                  $img.replaceWith($svg);
  
              }, 'xml');   
          });
      });
      &lt;/script&gt;
  </code></pre>
  
  <p>As a result I get something like this :</p>
  
  <p><a href="https://i.stack.imgur.com/83tao.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/83tao.png" alt="enter image description here"></a></p>
  
  <p>This allow me to add the stylesheet to layers. I.E</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  svg #GRILLE-1 * {stroke: darkgrey; stroke-width:2px; vector-effect:non-scaling-stroke;shape-rendering: crispedges;}
  svg #GRILLE-2 * {stroke: lightgrey; stroke-width:1px; vector-effect:non-scaling-stroke;shape-rendering: crispedges;}
  svg #GRILLE-TEXT text {font-size: 10px;
  font-family: sans-serif;
  fill: grey;
  }
  svg #GRILLE-DASH * {stroke: grey; stroke-width:1px; stroke-dasharray: 5,5;}
  svg #VISUEL-1 * {stroke: black; stroke-width:3px;fill:none;}
  svg #VISUEL-2 * {stroke: grey; stroke-width:2px;fill:none;}
  svg #VISUEL-3 * {stroke: lightgrey; stroke-width:2px;fill:none;}
  &lt;/style&gt;
  </code></pre>
  
  <p>On the intranet I have no problem to display the good result. On Chrome's webkit as well :</p>
  
  <p><a href="https://i.stack.imgur.com/dEXkh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dEXkh.png" alt="enter image description here"></a> </p>
  
  <p><strong>So my problem is when I export in pdf through wkhtmltopdf I get the same result than the "raw" file.</strong> If I directly go to the url of the page I export, everything displays fine...</p>
  
  <p><a href="https://i.stack.imgur.com/f3ho3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/f3ho3.png" alt="enter image description here"></a></p>
  
  <p>I have no idea what to do and where to begin to solve that issue.</p>
  
  <hr>
  
  <h2>EDIT</h2>
  
  <p>ROOT (/pdf/_demo/):</p>
  
  <pre><code>    require 'file:///Users/************/vendor/autoload.php' ;
  use mikehaertl\wkhtmlto\Pdf;
  
  
  $pdf = new Pdf(array(
      'binary' =&gt; '/usr/local/bin/wkhtmltopdf',
      'ignoreWarnings' =&gt; true,
      'no-outline',         // Make Chrome not complain
      'margin-top'    =&gt; 0,
      'margin-right'  =&gt; 0,
      'margin-bottom' =&gt; 0,
      'margin-left'   =&gt; 0,
      'page-size' =&gt; 'A4',
      //'width'         =&gt; 960,
      //'dpi' =&gt; 248,
      'dpi' =&gt; 248,
      'javascript-delay' =&gt; 3000,
  
      // Default page options
      'disable-smart-shrinking',
      //'user-style-sheet' =&gt; $_SERVER['DOCUMENT_ROOT'].'/pdf/_demo/lapis/pdf.css',
  
  ));
  
          $content1 = '*****/pdf/_demo/contenu/contenu-1.php';
          $content2 = '*****/pdf/_demo/contenu/contenu-2.php';
  
  
  
          $pdf-&gt;addPage($content1);
          $pdf-&gt;addPage($content2);
  
          if (!$pdf-&gt;saveAs('rendus/'.$n.'.pdf')) {
              echo $pdf-&gt;getError();
          }
  
          echo 'succès';
  </code></pre>
  
  <p>And content1 (/pdf/_demo/contenu/contenu-1.php)</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  svg #GRILLE-1 * {stroke: darkgrey; stroke-width:2px; vector-effect:non-scaling-stroke;shape-rendering: crispedges;}
  svg #GRILLE-2 * {stroke: lightgrey; stroke-width:1px; vector-effect:non-scaling-stroke;shape-rendering: crispedges;}
  svg #GRILLE-TEXT text {font-size: 10px;
  font-family: sans-serif;
  fill: grey;
  }
  svg #GRILLE-DASH * {stroke: grey; stroke-width:1px; stroke-dasharray: 5,5;}
  svg #VISUEL-1 * {stroke: black; stroke-width:3px;fill:none;}
  svg #VISUEL-2 * {stroke: grey; stroke-width:2px;fill:none;}
  svg #VISUEL-3 * {stroke: lightgrey; stroke-width:2px;fill:none;}
  &lt;/style&gt;
  
  
  &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"&gt;&lt;/script&gt;
  
  
   &lt;img class="svg" src="/pdf/_demo/contenu/test.svg"&gt;
  
   &lt;script type="text/javascript"&gt;
              $(function(){
          jQuery('img.svg').each(function(){
              var $img = jQuery(this);
              var imgID = $img.attr('id');
              var imgClass = $img.attr('class');
              var imgURL = $img.attr('src');
  
              jQuery.get(imgURL, function(data) {
                  // Get the SVG tag, ignore the rest
                  var $svg = jQuery(data).find('svg');
  
                  // Add replaced image's ID to the new SVG
                  if(typeof imgID !== 'undefined') {
                      $svg = $svg.attr('id', imgID);
                  }
                  // Add replaced image's classes to the new SVG
                  if(typeof imgClass !== 'undefined') {
                      $svg = $svg.attr('class', imgClass+' replaced-svg');
                  }
  
                  // Remove any invalid XML tags as per http://validator.w3.org
                  $svg = $svg.removeAttr('xmlns:a');
  
                  // Check if the viewport is set, else we gonna set it if we can.
                  if(!$svg.attr('viewBox') &amp;&amp; $svg.attr('height') &amp;&amp; $svg.attr('width')) {
                      $svg.attr('viewBox', '0 0 ' + $svg.attr('height') + ' ' + $svg.attr('width'))
                  }
  
                  // Replace image with new SVG
                  $img.replaceWith($svg);
  
              }, 'xml');   
          });
      });
      &lt;/script&gt;
  </code></pre>