Documentation

Changelog

How to create a PDF with Vector Images

DocRaptor supports vector images - both external and inline! Scalable Vector Graphics (or SVGs) are the primary method of inserting vector images into a website and DocRaptor works the same way.

External SVGs

To render external SVGs, refer to the SVG's URL and set any necessary styling properties:

div.external-svg {
  background-image: url(https://docraptor-production-cdn.s3.amazonaws.com/tutorials/raptor.svg);
  background-size: 240px;
  background-color: black;
  width: 240px;
  height: 172px;
}

In your HTML, add a referencing container:

<div class="external-svg"></div>

Inline SVGs

Inline SVGs are similar and require less CSS:

div.inline-svg {
  background-color: #fe7816;
  width: 240px;
}

The SVG source can simply be copied into your HTML. You will need to remove the XML declaration (the <?xml...> part) and the width/height attributes the <svg> element. This makes it easier to control the image with CSS.

<div class="inline-svg">
  <svg viewBox="0 0 60 43" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
      <path id="a" d="M5.823.355l-5.448 5.5h13.008l-7.56-5.5" />
      <mask id="o" fill="#fff">
        <use xlink:href="#a" />
      </mask>
      <path id="b" d="M5.823.355l-5.448 5.5 5.448-5.5" />
      <mask id="p" fill="#fff">
        <use xlink:href="#b" />
      </mask>
      <path d="M.467 6.437l1.863.322-1.863-.324m6.306-6.73l-.06.066 2.185 3.374-2.125-3.44" id="c" />
      <mask id="q" fill="#fff">
        <use xlink:href="#c" />
      </mask>
      <path id="d" d="M6.712-.228L.467 6.437l1.863.322 6.568-3.615L6.712-.228" />
      <mask id="r" fill="#fff">
        <use xlink:href="#d" />
      </mask>
      <path id="e" d="M2.303-.037L-.13 13.123l1.964.34 1.88-13 .01-.054-1.42-.448" />
      <mask id="s" fill="#fff">
        <use xlink:href="#e" />
      </mask>
      <path id="f" d="M2.303-.037L-.13 13.123l1.964.34 1.88-13 .01-.054-1.42-.448" />
      <mask id="t" fill="#fff">
        <use xlink:href="#f" />
      </mask>
      <path id="g" d="M-.277.41l-.008.05.008-.05" />
      <mask id="u" fill="#fff">
        <use xlink:href="#g" />
      </mask>
      <path id="h" d="M-.277.41l-.008.05.008-.05" />
      <mask id="v" fill="#fff">
        <use xlink:href="#h" />
      </mask>
      <path id="i" d="M9.49.093L.066 12.003 9.49.093" />
      <mask id="w" fill="#fff">
        <use xlink:href="#i" />
      </mask>
      <path id="j" d="M9.49.094L.067 12.004l15.216-2.856-.02-3.672L9.49.094" />
      <mask id="x" fill="#fff">
        <use xlink:href="#j" />
      </mask>
      <path id="k" d="M.26.476l.022 3.672L.262.475" />
      <mask id="y" fill="#fff">
        <use xlink:href="#k" />
      </mask>
      <path id="l" d="M8.418.436L.066 2.004l9.73 8.173-1.38-9.74" />
      <mask id="z" fill="#fff">
        <use xlink:href="#l" />
      </mask>
      <path id="m" d="M-.08-.13l9.915 1.275 2.683 10.564L9.835 1.143-.08-.128" />
      <mask id="A" fill="#fff">
        <use xlink:href="#m" />
      </mask>
      <path id="n" d="M2.92-.13L-.165 21.88l5.33.88L15.52 11.71 12.835 1.146 2.92-.128" />
      <mask id="B" fill="#fff">
        <use xlink:href="#n" />
      </mask>
    </defs>
    <g fill="none" fill-rule="evenodd">
      <path d="M24.283 27.147L9.066 30.004l9.426-11.91 5.77 5.382.02 3.67" fill="#253B76" />
      <path d="M52.898 25.146l-5.48-8.46-8.11-2.76-2.44 13.198 9.462 1.635 6.568-3.615" fill="#24366C" />
      <path d="M9.066 30.004l9.73 8.173-1.378-9.74-8.352 1.567" fill="#252E65" />
      <path d="M24.375 42.855h13.008l-7.56-5.5-5.448 5.5" fill="#243B77" />
      <path d="M50.217-.098l9.41 5.97v2.273L41.92 5.87l8.297-5.968" fill="#3877B1" />
      <path d="M52.898 25.146l-1.214 5.21-1.82-3.54 3.034-1.67" fill="#242C62" />
      <path d="M39.415 13.37L-.08.77l24.34 22.706L39.416 13.37" fill="#E5E1DB" />
      <path d="M39.415 13.37l-3.347 17.68-11.693 11.805-.114-19.38L39.417 13.37" fill="#144C8E" />
      <path d="M51.835 7.145l2.683 10.564-10.353 11.05-5.33-.883L41.92 5.87l9.915 1.275" fill="#1C5C9E" />
      <path d="M39.415 13.37L-.08.77l24.34 22.706L39.416 13.37" fill="#135697" />
      <path d="M5.823.355l-5.448 5.5h13.008l-7.56-5.5" mask="url(#o)" transform="translate(24 37)" />
      <path d="M5.823.355l-5.448 5.5 5.448-5.5" mask="url(#p)" transform="translate(24 37)" />
      <path d="M.467 6.437l1.863.322-1.863-.324m6.306-6.73l-.06.066 2.185 3.374-2.125-3.44" mask="url(#q)"
        transform="translate(44 22)" />
      <path d="M6.712-.228L.467 6.437l1.863.322 6.568-3.615L6.712-.228" mask="url(#r)" transform="translate(44 22)" />
      <path d="M2.303-.037L-.13 13.123l1.964.34 1.88-13 .01-.054-1.42-.448" mask="url(#s)"
        transform="translate(37 14)" />
      <path d="M2.303-.037L-.13 13.123l1.964.34 1.88-13 .01-.054-1.42-.448" mask="url(#t)"
        transform="translate(37 14)" />
      <path d="M-.277.41l-.008.05.008-.05" mask="url(#u)" transform="translate(41 14)" />
      <path d="M-.277.41l-.008.05.008-.05" mask="url(#v)" transform="translate(41 14)" />
      <path d="M9.49.093L.066 12.003 9.49.093" mask="url(#w)" transform="translate(9 18)" />
      <path d="M9.49.094L.067 12.004l15.216-2.856-.02-3.672L9.49.094" mask="url(#x)" transform="translate(9 18)" />
      <path d="M.26.476l.022 3.672L.262.475" mask="url(#y)" transform="translate(24 23)" />
      <path d="M8.418.436L.066 2.004l9.73 8.173-1.38-9.74" mask="url(#z)" transform="translate(9 28)" />
      <path d="M-.08-.13l9.915 1.275 2.683 10.564L9.835 1.143-.08-.128" mask="url(#A)" transform="translate(42 6)" />
      <path d="M2.92-.13L-.165 21.88l5.33.88L15.52 11.71 12.835 1.146 2.92-.128" mask="url(#B)"
        transform="translate(39 6)" />
      <image x="46.92" y="26" width="4.8" height="-4.8"
        xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAKQWlDQ1BJQ0MgUHJvZmlsZQAASA2dlndUU9kWh8+9N73QEiIgJfQaegkg0jtIFQRRiUmAUAKGhCZ2RAVGFBEpVmRUwAFHhyJjRRQLg4Ji1wnyEFDGwVFEReXdjGsJ7601896a/cdZ39nnt9fZZ+9917oAUPyCBMJ0WAGANKFYFO7rwVwSE8vE9wIYEAEOWAHA4WZmBEf4RALU/L09mZmoSMaz9u4ugGS72yy/UCZz1v9/kSI3QyQGAApF1TY8fiYX5QKUU7PFGTL/BMr0lSkyhjEyFqEJoqwi48SvbPan5iu7yZiXJuShGlnOGbw0noy7UN6aJeGjjAShXJgl4GejfAdlvVRJmgDl9yjT0/icTAAwFJlfzOcmoWyJMkUUGe6J8gIACJTEObxyDov5OWieAHimZ+SKBIlJYqYR15hp5ejIZvrxs1P5YjErlMNN4Yh4TM/0tAyOMBeAr2+WRQElWW2ZaJHtrRzt7VnW5mj5v9nfHn5T/T3IevtV8Sbsz55BjJ5Z32zsrC+9FgD2JFqbHbO+lVUAtG0GQOXhrE/vIADyBQC03pzzHoZsXpLE4gwnC4vs7GxzAZ9rLivoN/ufgm/Kv4Y595nL7vtWO6YXP4EjSRUzZUXlpqemS0TMzAwOl89k/fcQ/+PAOWnNycMsnJ/AF/GF6FVR6JQJhIlou4U8gViQLmQKhH/V4X8YNicHGX6daxRodV8AfYU5ULhJB8hvPQBDIwMkbj96An3rWxAxCsi+vGitka9zjzJ6/uf6Hwtcim7hTEEiU+b2DI9kciWiLBmj34RswQISkAd0oAo0gS4wAixgDRyAM3AD3iAAhIBIEAOWAy5IAmlABLJBPtgACkEx2AF2g2pwANSBetAEToI2cAZcBFfADXALDIBHQAqGwUswAd6BaQiC8BAVokGqkBakD5lC1hAbWgh5Q0FQOBQDxUOJkBCSQPnQJqgYKoOqoUNQPfQjdBq6CF2D+qAH0CA0Bv0BfYQRmALTYQ3YALaA2bA7HAhHwsvgRHgVnAcXwNvhSrgWPg63whfhG/AALIVfwpMIQMgIA9FGWAgb8URCkFgkAREha5EipAKpRZqQDqQbuY1IkXHkAwaHoWGYGBbGGeOHWYzhYlZh1mJKMNWYY5hWTBfmNmYQM4H5gqVi1bGmWCesP3YJNhGbjS3EVmCPYFuwl7ED2GHsOxwOx8AZ4hxwfrgYXDJuNa4Etw/XjLuA68MN4SbxeLwq3hTvgg/Bc/BifCG+Cn8cfx7fjx/GvyeQCVoEa4IPIZYgJGwkVBAaCOcI/YQRwjRRgahPdCKGEHnEXGIpsY7YQbxJHCZOkxRJhiQXUiQpmbSBVElqIl0mPSa9IZPJOmRHchhZQF5PriSfIF8lD5I/UJQoJhRPShxFQtlOOUq5QHlAeUOlUg2obtRYqpi6nVpPvUR9Sn0vR5Mzl/OX48mtk6uRa5Xrl3slT5TXl3eXXy6fJ18hf0r+pvy4AlHBQMFTgaOwVqFG4bTCPYVJRZqilWKIYppiiWKD4jXFUSW8koGStxJPqUDpsNIlpSEaQtOledK4tE20Otpl2jAdRzek+9OT6cX0H+i99AllJWVb5SjlHOUa5bPKUgbCMGD4M1IZpYyTjLuMj/M05rnP48/bNq9pXv+8KZX5Km4qfJUilWaVAZWPqkxVb9UU1Z2qbapP1DBqJmphatlq+9Uuq43Pp893ns+dXzT/5PyH6rC6iXq4+mr1w+o96pMamhq+GhkaVRqXNMY1GZpumsma5ZrnNMe0aFoLtQRa5VrntV4wlZnuzFRmJbOLOaGtru2nLdE+pN2rPa1jqLNYZ6NOs84TXZIuWzdBt1y3U3dCT0svWC9fr1HvoT5Rn62fpL9Hv1t/ysDQINpgi0GbwaihiqG/YZ5ho+FjI6qRq9Eqo1qjO8Y4Y7ZxivE+41smsImdSZJJjclNU9jU3lRgus+0zwxr5mgmNKs1u8eisNxZWaxG1qA5wzzIfKN5m/krCz2LWIudFt0WXyztLFMt6ywfWSlZBVhttOqw+sPaxJprXWN9x4Zq42Ozzqbd5rWtqS3fdr/tfTuaXbDdFrtOu8/2DvYi+yb7MQc9h3iHvQ732HR2KLuEfdUR6+jhuM7xjOMHJ3snsdNJp9+dWc4pzg3OowsMF/AX1C0YctFx4bgccpEuZC6MX3hwodRV25XjWuv6zE3Xjed2xG3E3dg92f24+ysPSw+RR4vHlKeT5xrPC16Il69XkVevt5L3Yu9q76c+Oj6JPo0+E752vqt9L/hh/QL9dvrd89fw5/rX+08EOASsCegKpARGBFYHPgsyCRIFdQTDwQHBu4IfL9JfJFzUFgJC/EN2hTwJNQxdFfpzGC4sNKwm7Hm4VXh+eHcELWJFREPEu0iPyNLIR4uNFksWd0bJR8VF1UdNRXtFl0VLl1gsWbPkRoxajCCmPRYfGxV7JHZyqffS3UuH4+ziCuPuLjNclrPs2nK15anLz66QX8FZcSoeGx8d3xD/iRPCqeVMrvRfuXflBNeTu4f7kufGK+eN8V34ZfyRBJeEsoTRRJfEXYljSa5JFUnjAk9BteB1sl/ygeSplJCUoykzqdGpzWmEtPi000IlYYqwK10zPSe9L8M0ozBDuspp1e5VE6JA0ZFMKHNZZruYjv5M9UiMJJslg1kLs2qy3mdHZZ/KUcwR5vTkmuRuyx3J88n7fjVmNXd1Z752/ob8wTXuaw6thdauXNu5Tnddwbrh9b7rj20gbUjZ8MtGy41lG99uit7UUaBRsL5gaLPv5sZCuUJR4b0tzlsObMVsFWzt3WazrWrblyJe0fViy+KK4k8l3JLr31l9V/ndzPaE7b2l9qX7d+B2CHfc3em681iZYlle2dCu4F2t5czyovK3u1fsvlZhW3FgD2mPZI+0MqiyvUqvakfVp+qk6oEaj5rmvep7t+2d2sfb17/fbX/TAY0DxQc+HhQcvH/I91BrrUFtxWHc4azDz+ui6rq/Z39ff0TtSPGRz0eFR6XHwo911TvU1zeoN5Q2wo2SxrHjccdv/eD1Q3sTq+lQM6O5+AQ4ITnx4sf4H++eDDzZeYp9qukn/Z/2ttBailqh1tzWibakNml7THvf6YDTnR3OHS0/m/989Iz2mZqzymdLz5HOFZybOZ93fvJCxoXxi4kXhzpXdD66tOTSna6wrt7LgZevXvG5cqnbvfv8VZerZ645XTt9nX297Yb9jdYeu56WX+x+aem172296XCz/ZbjrY6+BX3n+l37L972un3ljv+dGwOLBvruLr57/17cPel93v3RB6kPXj/Mejj9aP1j7OOiJwpPKp6qP6391fjXZqm99Oyg12DPs4hnj4a4Qy//lfmvT8MFz6nPK0a0RupHrUfPjPmM3Xqx9MXwy4yX0+OFvyn+tveV0auffnf7vWdiycTwa9HrmT9K3qi+OfrW9m3nZOjk03dp76anit6rvj/2gf2h+2P0x5Hp7E/4T5WfjT93fAn88ngmbWbm3/eE8/syOll+AAAAnklEQVQYGV1OSQ7CMAz02KkAIeDAQ3gL/38BixCCwoUuzDhFlXA227PE2B6OZb331S4WGzRL7WjgYQgApW8vfAyuY2bMM1iMFgEviAJW4eTBXFQJdBEOGz7mbEW9E5sYhU79+y7jVNCdi78MJh/BYrxu6Zn+OQOz0WyCxWivmoAeUzD5qWune54z0XT1u1k9MzSzpOz8w2x1j5OkDOALEFEay7YKPGMAAAAASUVORK5CYII=" />
    </g>
  </svg>
</div>

Convert SVGs directly into PDFs

You can use either inline or external SVGs in a DocRaptor PDF, or you can convert SVG code directly to PDFs with DocRaptor. Since SVGs are based on XML, you don't even need to wrap them in an <html> tag before passing the file code to DocRaptor.

See any of the below code samples to generate a document with vector images in your programming language with DocRaptor's HTML-to-PDF API.

Select Your Language

Using DocRaptor's API

Below are the basics of using DocRaptor's HTTP API. It can easily be used in any programming language, but if we don't have a native agent for your language, please let us know! That'll help us write the best examples and agents.

The API key shown here, YOUR_API_KEY_HERE, actually works! Use it for testing without creating an account. The only requirement is test mode must be used (test parameter set to true).

To make documents, send a POST request to this URL:

https://YOUR_API_KEY_HERE@staging-api.docraptor.com/docs

Send JSON-encoded API parameters (you'll need to set an HTTP header for Content-Type as application/json). These are the only required parameters:

{
  "type": "pdf",
  "document_content": "Hello World!"
}

Generating the Document with cURL

Here's a completely functional code sample for this tutorial:

cat <<-'DOCUMENT_OPTIONS' > docraptor_parameters.json
  {
    "test": true,
    "document_type": "pdf",
    "document_content": "<h2>Vector Images</h2><div class=\"external-svg\"></div><div class=\"inline-svg\"><svg viewBox=\"0 0 60 43\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"><defs><path id=\"a\" d=\"M5.823.355l-5.448 5.5h13.008l-7.56-5.5\" /><mask id=\"o\" fill=\"#fff\"><use xlink:href=\"#a\" /></mask><path id=\"b\" d=\"M5.823.355l-5.448 5.5 5.448-5.5\" /><mask id=\"p\" fill=\"#fff\"><use xlink:href=\"#b\" /></mask><path d=\"M.467 6.437l1.863.322-1.863-.324m6.306-6.73l-.06.066 2.185 3.374-2.125-3.44\" id=\"c\" /><mask id=\"q\" fill=\"#fff\"><use xlink:href=\"#c\" /></mask><path id=\"d\" d=\"M6.712-.228L.467 6.437l1.863.322 6.568-3.615L6.712-.228\" /><mask id=\"r\" fill=\"#fff\"><use xlink:href=\"#d\" /></mask><path id=\"e\" d=\"M2.303-.037L-.13 13.123l1.964.34 1.88-13 .01-.054-1.42-.448\" /><mask id=\"s\" fill=\"#fff\"><use xlink:href=\"#e\" /></mask><path id=\"f\" d=\"M2.303-.037L-.13 13.123l1.964.34 1.88-13 .01-.054-1.42-.448\" /><mask id=\"t\" fill=\"#fff\"><use xlink:href=\"#f\" /></mask><path id=\"g\" d=\"M-.277.41l-.008.05.008-.05\" /><mask id=\"u\" fill=\"#fff\"><use xlink:href=\"#g\" /></mask><path id=\"h\" d=\"M-.277.41l-.008.05.008-.05\" /><mask id=\"v\" fill=\"#fff\"><use xlink:href=\"#h\" /></mask><path id=\"i\" d=\"M9.49.093L.066 12.003 9.49.093\" /><mask id=\"w\" fill=\"#fff\"><use xlink:href=\"#i\" /></mask><path id=\"j\" d=\"M9.49.094L.067 12.004l15.216-2.856-.02-3.672L9.49.094\" /><mask id=\"x\" fill=\"#fff\"><use xlink:href=\"#j\" /></mask><path id=\"k\" d=\"M.26.476l.022 3.672L.262.475\" /><mask id=\"y\" fill=\"#fff\"><use xlink:href=\"#k\" /></mask><path id=\"l\" d=\"M8.418.436L.066 2.004l9.73 8.173-1.38-9.74\" /><mask id=\"z\" fill=\"#fff\"><use xlink:href=\"#l\" /></mask><path id=\"m\" d=\"M-.08-.13l9.915 1.275 2.683 10.564L9.835 1.143-.08-.128\" /><mask id=\"A\" fill=\"#fff\"><use xlink:href=\"#m\" /></mask><path id=\"n\" d=\"M2.92-.13L-.165 21.88l5.33.88L15.52 11.71 12.835 1.146 2.92-.128\" /><mask id=\"B\" fill=\"#fff\"><use xlink:href=\"#n\" /></mask></defs><g fill=\"none\" fill-rule=\"evenodd\"><path d=\"M24.283 27.147L9.066 30.004l9.426-11.91 5.77 5.382.02 3.67\" fill=\"#253B76\" /><path d=\"M52.898 25.146l-5.48-8.46-8.11-2.76-2.44 13.198 9.462 1.635 6.568-3.615\" fill=\"#24366C\" /><path d=\"M9.066 30.004l9.73 8.173-1.378-9.74-8.352 1.567\" fill=\"#252E65\" /><path d=\"M24.375 42.855h13.008l-7.56-5.5-5.448 5.5\" fill=\"#243B77\" /><path d=\"M50.217-.098l9.41 5.97v2.273L41.92 5.87l8.297-5.968\" fill=\"#3877B1\" /><path d=\"M52.898 25.146l-1.214 5.21-1.82-3.54 3.034-1.67\" fill=\"#242C62\" /><path d=\"M39.415 13.37L-.08.77l24.34 22.706L39.416 13.37\" fill=\"#E5E1DB\" /><path d=\"M39.415 13.37l-3.347 17.68-11.693 11.805-.114-19.38L39.417 13.37\" fill=\"#144C8E\" /><path d=\"M51.835 7.145l2.683 10.564-10.353 11.05-5.33-.883L41.92 5.87l9.915 1.275\" fill=\"#1C5C9E\" /><path d=\"M39.415 13.37L-.08.77l24.34 22.706L39.416 13.37\" fill=\"#135697\" /><path d=\"M5.823.355l-5.448 5.5h13.008l-7.56-5.5\" mask=\"url(#o)\" transform=\"translate(24 37)\" /><path d=\"M5.823.355l-5.448 5.5 5.448-5.5\" mask=\"url(#p)\" transform=\"translate(24 37)\" /><path d=\"M.467 6.437l1.863.322-1.863-.324m6.306-6.73l-.06.066 2.185 3.374-2.125-3.44\" mask=\"url(#q)\"transform=\"translate(44 22)\" /><path d=\"M6.712-.228L.467 6.437l1.863.322 6.568-3.615L6.712-.228\" mask=\"url(#r)\" transform=\"translate(44 22)\" /><path d=\"M2.303-.037L-.13 13.123l1.964.34 1.88-13 .01-.054-1.42-.448\" mask=\"url(#s)\"transform=\"translate(37 14)\" /><path d=\"M2.303-.037L-.13 13.123l1.964.34 1.88-13 .01-.054-1.42-.448\" mask=\"url(#t)\"transform=\"translate(37 14)\" /><path d=\"M-.277.41l-.008.05.008-.05\" mask=\"url(#u)\" transform=\"translate(41 14)\" /><path d=\"M-.277.41l-.008.05.008-.05\" mask=\"url(#v)\" transform=\"translate(41 14)\" /><path d=\"M9.49.093L.066 12.003 9.49.093\" mask=\"url(#w)\" transform=\"translate(9 18)\" /><path d=\"M9.49.094L.067 12.004l15.216-2.856-.02-3.672L9.49.094\" mask=\"url(#x)\" transform=\"translate(9 18)\" /><path d=\"M.26.476l.022 3.672L.262.475\" mask=\"url(#y)\" transform=\"translate(24 23)\" /><path d=\"M8.418.436L.066 2.004l9.73 8.173-1.38-9.74\" mask=\"url(#z)\" transform=\"translate(9 28)\" /><path d=\"M-.08-.13l9.915 1.275 2.683 10.564L9.835 1.143-.08-.128\" mask=\"url(#A)\" transform=\"translate(42 6)\" /><path d=\"M2.92-.13L-.165 21.88l5.33.88L15.52 11.71 12.835 1.146 2.92-.128\" mask=\"url(#B)\"transform=\"translate(39 6)\" /><image x=\"46.92\" y=\"26\" width=\"4.8\" height=\"-4.8\"xlink:href=\"data:image/png;base64,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\" /></g></svg></div><style>div.external-svg {background-image: url(https://docraptor-production-cdn.s3.amazonaws.com/tutorials/raptor.svg);background-size: 240px;background-color: black;width: 240px;height: 172px;}div.inline-svg {background-color: #fe7816;width: 240px;}</style>"
  }
DOCUMENT_OPTIONS

curl https://YOUR_API_KEY_HERE@api.docraptor.com/docs \
  --fail --silent --show-error \
  --header "Content-Type:application/json" \
  --data @docraptor_parameters.json \
  > vector-images.pdf

Downloads

Here are all the files you need to follow this tutorial:

Download Bash Code Download HTML Download PDF

Frameworks supported

.NET 4.0 or later
Windows Phone 7.1 (Mango)

Dependencies

RestSharp - 105.2.3 or later
Json.NET - 7.0.0 or later
JsonSubTypes - 1.2.0 or later

Installing the .NET Agent

With Nuget:

nuget.exe install DocRaptor

With the Package Manager Console:

Install-Package DocRaptor

You can also download the DLL directly from GitHub.

Generating the Document

The API key shown here, YOUR_API_KEY_HERE, actually works! Use it for testing without creating an account. The only requirement is test mode must be used (test parameter set to true).

using DocRaptor.Client;
using DocRaptor.Model;
using DocRaptor.Api;
using System;
using System.IO;

class DocRaptorExample
{
    static void Main(string[] args)
    {
        DocApi docraptor = new DocApi();
        // this key works in test mode!
        docraptor.Configuration.Username = "YOUR_API_KEY_HERE";

        try
        {
            Doc doc = new Doc(
                name: "vector-images",
                test: true, // test documents are free but watermarked
                documentType: Doc.DocumentTypeEnum.Pdf,
                documentContent: System.IO.File.ReadAllText(@"vector-images-content.html") 
                // documentUrl: "https://docraptor.com/examples/invoice.html", 
                // javascript: true, 
                // princeOptions: new PrinceOptions(
                //     media: "print", // @media 'screen' or 'print' CSS
                //     baseurl: "https://yoursite.com" // the base URL for any relative URLs
                // )
            );

            byte[] document = docraptor.CreateDoc(doc);
            File.WriteAllBytes("vector-images.pdf", document);
            Console.WriteLine("Successfully created vector-images.pdf!");
        } catch (DocRaptor.Client.ApiException error) {
            Console.Write(error.ErrorContent);
        }
    }
}

Downloads

Here are all the files you need to follow this tutorial:

Download .NET Code Download HTML Download PDF

Install the Java Agent

Add the com.docraptor package to your project. For example, with Maven you'd add the DocRaptor package to your pom.xml:

<dependency>
  <groupId>com.docraptor</groupId>
  <artifactId>docraptor</artifactId>
  <version>3.0.0</version>
</dependency>

And then install it:

mvn install com.docraptor

Generating the Document

The API key shown here, YOUR_API_KEY_HERE, actually works! Use it for testing without creating an account. The only requirement is test mode must be used (test parameter set to true).

import com.docraptor.*;
import java.io.*;
import java.net.*;
import java.nio.file.*;

public class DocRaptorExample {

  public static void main(String[] args) throws Exception {
    DocApi docraptor = new DocApi();
    ApiClient client = docraptor.getApiClient();
    client.setUsername("YOUR_API_KEY_HERE"); // this key works in test mode!

    try {
      Doc doc = new Doc();
      doc.setTest(true); // test documents are free but watermarked
      doc.setDocumentType(Doc.DocumentTypeEnum.PDF);

      doc.setDocumentContent(new String(Files.readAllBytes(Paths.get("vector-images-content.html"))));

      // doc.setDocumentUrl("https://docraptor.com/examples/invoice.html");
      // doc.setJavascript(true);
      // PrinceOptions princeOptions = new PrinceOptions();
      // princeOptions.setMedia("print"); // @media 'screen' or 'print' CSS
      // princeOptions.setBaseurl("https://yoursite.com"); // the base URL for any relative URLs
      // doc.setPrinceOptions(princeOptions);

      byte[] document = docraptor.createDoc(doc);

      // createDoc() returns a binary string
      FileOutputStream file = new FileOutputStream("vector-images.pdf");
      file.write(document);
      file.close();
      System.out.println("Successfully created vector-images.pdf!");
    } catch (ApiException error) {
      System.err.println(error);
      System.err.println(error.getCode());
      System.err.println(error.getMessage());
      System.err.println(error.getResponseBody());
    }
  }
}

Downloads

Here are all the files you need to follow this tutorial:

Download Java Code Download HTML Download PDF

The DocRaptor JavaScript Library

The DocRaptor JavaScript library makes it easy to create PDFs with JavaScript. The library does not require jQuery, but you can use jQuery to define your document content. When a PDF is requested, the library constructs a hidden form and submits it to the DocRaptor API. The form is necessary to trigger the browser download window.

This library exposes your API key in your website source code. This code should never be used in a publicly-accessible location, instead try using our referrer-based API or a server-side agent such as PHP or Ruby.

JavaScript Example

<html>
  <head>
    <script src="https://docraptor.com/docraptor-1.0.0.js"></script>
    <script>
      var downloadDocumentFrom = function(selector) {
        // this key works in test mode!
        DocRaptor.createAndDownloadDoc("YOUR_API_KEY_HERE", {
          name: "vector-images",
          test: true, // test documents are free but watermarked
          document_type: "pdf",
          document_content: document.querySelector(selector).innerHTML
          // document_url: "https://docraptor.com/examples/invoice.html",
          // javascript: true,
          // prince_options: {
          //   media: "print", // @media 'screen' or 'print' CSS
          //   baseurl: "https://yoursite.com", // the base URL for any relative URLs
          // }
        });
      };
    </script>
    <style>
      @media print {
        #download-button {
          display: none;
        }
      }
    </style>
  </head>
  <body>
    <h2>Vector Images</h2>
    <div class="external-svg"></div>
    <div class="inline-svg">
      <svg viewBox="0 0 60 43" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <defs>
          <path id="a" d="M5.823.355l-5.448 5.5h13.008l-7.56-5.5" />
          <mask id="o" fill="#fff">
            <use xlink:href="#a" />
          </mask>
          <path id="b" d="M5.823.355l-5.448 5.5 5.448-5.5" />
          <mask id="p" fill="#fff">
            <use xlink:href="#b" />
          </mask>
          <path d="M.467 6.437l1.863.322-1.863-.324m6.306-6.73l-.06.066 2.185 3.374-2.125-3.44" id="c" />
          <mask id="q" fill="#fff">
            <use xlink:href="#c" />
          </mask>
          <path id="d" d="M6.712-.228L.467 6.437l1.863.322 6.568-3.615L6.712-.228" />
          <mask id="r" fill="#fff">
            <use xlink:href="#d" />
          </mask>
          <path id="e" d="M2.303-.037L-.13 13.123l1.964.34 1.88-13 .01-.054-1.42-.448" />
          <mask id="s" fill="#fff">
            <use xlink:href="#e" />
          </mask>
          <path id="f" d="M2.303-.037L-.13 13.123l1.964.34 1.88-13 .01-.054-1.42-.448" />
          <mask id="t" fill="#fff">
            <use xlink:href="#f" />
          </mask>
          <path id="g" d="M-.277.41l-.008.05.008-.05" />
          <mask id="u" fill="#fff">
            <use xlink:href="#g" />
          </mask>
          <path id="h" d="M-.277.41l-.008.05.008-.05" />
          <mask id="v" fill="#fff">
            <use xlink:href="#h" />
          </mask>
          <path id="i" d="M9.49.093L.066 12.003 9.49.093" />
          <mask id="w" fill="#fff">
            <use xlink:href="#i" />
          </mask>
          <path id="j" d="M9.49.094L.067 12.004l15.216-2.856-.02-3.672L9.49.094" />
          <mask id="x" fill="#fff">
            <use xlink:href="#j" />
          </mask>
          <path id="k" d="M.26.476l.022 3.672L.262.475" />
          <mask id="y" fill="#fff">
            <use xlink:href="#k" />
          </mask>
          <path id="l" d="M8.418.436L.066 2.004l9.73 8.173-1.38-9.74" />
          <mask id="z" fill="#fff">
            <use xlink:href="#l" />
          </mask>
          <path id="m" d="M-.08-.13l9.915 1.275 2.683 10.564L9.835 1.143-.08-.128" />
          <mask id="A" fill="#fff">
            <use xlink:href="#m" />
          </mask>
          <path id="n" d="M2.92-.13L-.165 21.88l5.33.88L15.52 11.71 12.835 1.146 2.92-.128" />
          <mask id="B" fill="#fff">
            <use xlink:href="#n" />
          </mask>
        </defs>
        <g fill="none" fill-rule="evenodd">
          <path d="M24.283 27.147L9.066 30.004l9.426-11.91 5.77 5.382.02 3.67" fill="#253B76" />
          <path d="M52.898 25.146l-5.48-8.46-8.11-2.76-2.44 13.198 9.462 1.635 6.568-3.615" fill="#24366C" />
          <path d="M9.066 30.004l9.73 8.173-1.378-9.74-8.352 1.567" fill="#252E65" />
          <path d="M24.375 42.855h13.008l-7.56-5.5-5.448 5.5" fill="#243B77" />
          <path d="M50.217-.098l9.41 5.97v2.273L41.92 5.87l8.297-5.968" fill="#3877B1" />
          <path d="M52.898 25.146l-1.214 5.21-1.82-3.54 3.034-1.67" fill="#242C62" />
          <path d="M39.415 13.37L-.08.77l24.34 22.706L39.416 13.37" fill="#E5E1DB" />
          <path d="M39.415 13.37l-3.347 17.68-11.693 11.805-.114-19.38L39.417 13.37" fill="#144C8E" />
          <path d="M51.835 7.145l2.683 10.564-10.353 11.05-5.33-.883L41.92 5.87l9.915 1.275" fill="#1C5C9E" />
          <path d="M39.415 13.37L-.08.77l24.34 22.706L39.416 13.37" fill="#135697" />
          <path d="M5.823.355l-5.448 5.5h13.008l-7.56-5.5" mask="url(#o)" transform="translate(24 37)" />
          <path d="M5.823.355l-5.448 5.5 5.448-5.5" mask="url(#p)" transform="translate(24 37)" />
          <path d="M.467 6.437l1.863.322-1.863-.324m6.306-6.73l-.06.066 2.185 3.374-2.125-3.44" mask="url(#q)" transform="translate(44 22)" />
          <path d="M6.712-.228L.467 6.437l1.863.322 6.568-3.615L6.712-.228" mask="url(#r)" transform="translate(44 22)" />
          <path d="M2.303-.037L-.13 13.123l1.964.34 1.88-13 .01-.054-1.42-.448" mask="url(#s)" transform="translate(37 14)" />
          <path d="M2.303-.037L-.13 13.123l1.964.34 1.88-13 .01-.054-1.42-.448" mask="url(#t)" transform="translate(37 14)" />
          <path d="M-.277.41l-.008.05.008-.05" mask="url(#u)" transform="translate(41 14)" />
          <path d="M-.277.41l-.008.05.008-.05" mask="url(#v)" transform="translate(41 14)" />
          <path d="M9.49.093L.066 12.003 9.49.093" mask="url(#w)" transform="translate(9 18)" />
          <path d="M9.49.094L.067 12.004l15.216-2.856-.02-3.672L9.49.094" mask="url(#x)" transform="translate(9 18)" />
          <path d="M.26.476l.022 3.672L.262.475" mask="url(#y)" transform="translate(24 23)" />
          <path d="M8.418.436L.066 2.004l9.73 8.173-1.38-9.74" mask="url(#z)" transform="translate(9 28)" />
          <path d="M-.08-.13l9.915 1.275 2.683 10.564L9.835 1.143-.08-.128" mask="url(#A)" transform="translate(42 6)" />
          <path d="M2.92-.13L-.165 21.88l5.33.88L15.52 11.71 12.835 1.146 2.92-.128" mask="url(#B)" transform="translate(39 6)" />
          <image
            x="46.92"
            y="26"
            width="4.8"
            height="-4.8"
            xlink:href="data:image/png;base64,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"
          />
        </g>
      </svg>
    </div>

    <style>
      div.external-svg {
        background-image: url(https://docraptor-production-cdn.s3.amazonaws.com/tutorials/raptor.svg);
        background-size: 240px;
        background-color: black;
        width: 240px;
        height: 172px;
      }
      div.inline-svg {
        background-color: #fe7816;
        width: 240px;
      }
    </style>
    <button id="download-button" type="button" onclick="downloadDocumentFrom('html')">Download Document</button>
  </body>
</html>

Downloads

Here are all the files you need to follow this tutorial:

Download JavaScript Code Download HTML Download PDF

DocRaptor & Node.js

The best way to use DocRaptor with Node.js is directly through our HTTP API. In this example, we'll use the axios module, but you can obviously use any HTTP client you'd like.

Install the Axios Module

npm install axios

Generating the Document

The API key shown here, YOUR_API_KEY_HERE, actually works! Use it for testing without creating an account. The only requirement is test mode must be used (test parameter set to true).

const axios = require("axios");
const fs = require("fs");

const document_content = `
  <h2>Vector Images</h2>
  <div class="external-svg"></div>
  <div class="inline-svg">
    <svg viewBox="0 0 60 43" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <defs>
        <path id="a" d="M5.823.355l-5.448 5.5h13.008l-7.56-5.5" />
        <mask id="o" fill="#fff">
          <use xlink:href="#a" />
        </mask>
        <path id="b" d="M5.823.355l-5.448 5.5 5.448-5.5" />
        <mask id="p" fill="#fff">
          <use xlink:href="#b" />
        </mask>
        <path d="M.467 6.437l1.863.322-1.863-.324m6.306-6.73l-.06.066 2.185 3.374-2.125-3.44" id="c" />
        <mask id="q" fill="#fff">
          <use xlink:href="#c" />
        </mask>
        <path id="d" d="M6.712-.228L.467 6.437l1.863.322 6.568-3.615L6.712-.228" />
        <mask id="r" fill="#fff">
          <use xlink:href="#d" />
        </mask>
        <path id="e" d="M2.303-.037L-.13 13.123l1.964.34 1.88-13 .01-.054-1.42-.448" />
        <mask id="s" fill="#fff">
          <use xlink:href="#e" />
        </mask>
        <path id="f" d="M2.303-.037L-.13 13.123l1.964.34 1.88-13 .01-.054-1.42-.448" />
        <mask id="t" fill="#fff">
          <use xlink:href="#f" />
        </mask>
        <path id="g" d="M-.277.41l-.008.05.008-.05" />
        <mask id="u" fill="#fff">
          <use xlink:href="#g" />
        </mask>
        <path id="h" d="M-.277.41l-.008.05.008-.05" />
        <mask id="v" fill="#fff">
          <use xlink:href="#h" />
        </mask>
        <path id="i" d="M9.49.093L.066 12.003 9.49.093" />
        <mask id="w" fill="#fff">
          <use xlink:href="#i" />
        </mask>
        <path id="j" d="M9.49.094L.067 12.004l15.216-2.856-.02-3.672L9.49.094" />
        <mask id="x" fill="#fff">
          <use xlink:href="#j" />
        </mask>
        <path id="k" d="M.26.476l.022 3.672L.262.475" />
        <mask id="y" fill="#fff">
          <use xlink:href="#k" />
        </mask>
        <path id="l" d="M8.418.436L.066 2.004l9.73 8.173-1.38-9.74" />
        <mask id="z" fill="#fff">
          <use xlink:href="#l" />
        </mask>
        <path id="m" d="M-.08-.13l9.915 1.275 2.683 10.564L9.835 1.143-.08-.128" />
        <mask id="A" fill="#fff">
          <use xlink:href="#m" />
        </mask>
        <path id="n" d="M2.92-.13L-.165 21.88l5.33.88L15.52 11.71 12.835 1.146 2.92-.128" />
        <mask id="B" fill="#fff">
          <use xlink:href="#n" />
        </mask>
      </defs>
      <g fill="none" fill-rule="evenodd">
        <path d="M24.283 27.147L9.066 30.004l9.426-11.91 5.77 5.382.02 3.67" fill="#253B76" />
        <path d="M52.898 25.146l-5.48-8.46-8.11-2.76-2.44 13.198 9.462 1.635 6.568-3.615" fill="#24366C" />
        <path d="M9.066 30.004l9.73 8.173-1.378-9.74-8.352 1.567" fill="#252E65" />
        <path d="M24.375 42.855h13.008l-7.56-5.5-5.448 5.5" fill="#243B77" />
        <path d="M50.217-.098l9.41 5.97v2.273L41.92 5.87l8.297-5.968" fill="#3877B1" />
        <path d="M52.898 25.146l-1.214 5.21-1.82-3.54 3.034-1.67" fill="#242C62" />
        <path d="M39.415 13.37L-.08.77l24.34 22.706L39.416 13.37" fill="#E5E1DB" />
        <path d="M39.415 13.37l-3.347 17.68-11.693 11.805-.114-19.38L39.417 13.37" fill="#144C8E" />
        <path d="M51.835 7.145l2.683 10.564-10.353 11.05-5.33-.883L41.92 5.87l9.915 1.275" fill="#1C5C9E" />
        <path d="M39.415 13.37L-.08.77l24.34 22.706L39.416 13.37" fill="#135697" />
        <path d="M5.823.355l-5.448 5.5h13.008l-7.56-5.5" mask="url(#o)" transform="translate(24 37)" />
        <path d="M5.823.355l-5.448 5.5 5.448-5.5" mask="url(#p)" transform="translate(24 37)" />
        <path d="M.467 6.437l1.863.322-1.863-.324m6.306-6.73l-.06.066 2.185 3.374-2.125-3.44" mask="url(#q)"
          transform="translate(44 22)" />
        <path d="M6.712-.228L.467 6.437l1.863.322 6.568-3.615L6.712-.228" mask="url(#r)" transform="translate(44 22)" />
        <path d="M2.303-.037L-.13 13.123l1.964.34 1.88-13 .01-.054-1.42-.448" mask="url(#s)"
          transform="translate(37 14)" />
        <path d="M2.303-.037L-.13 13.123l1.964.34 1.88-13 .01-.054-1.42-.448" mask="url(#t)"
          transform="translate(37 14)" />
        <path d="M-.277.41l-.008.05.008-.05" mask="url(#u)" transform="translate(41 14)" />
        <path d="M-.277.41l-.008.05.008-.05" mask="url(#v)" transform="translate(41 14)" />
        <path d="M9.49.093L.066 12.003 9.49.093" mask="url(#w)" transform="translate(9 18)" />
        <path d="M9.49.094L.067 12.004l15.216-2.856-.02-3.672L9.49.094" mask="url(#x)" transform="translate(9 18)" />
        <path d="M.26.476l.022 3.672L.262.475" mask="url(#y)" transform="translate(24 23)" />
        <path d="M8.418.436L.066 2.004l9.73 8.173-1.38-9.74" mask="url(#z)" transform="translate(9 28)" />
        <path d="M-.08-.13l9.915 1.275 2.683 10.564L9.835 1.143-.08-.128" mask="url(#A)" transform="translate(42 6)" />
        <path d="M2.92-.13L-.165 21.88l5.33.88L15.52 11.71 12.835 1.146 2.92-.128" mask="url(#B)"
          transform="translate(39 6)" />
        <image x="46.92" y="26" width="4.8" height="-4.8"
          xlink:href="data:image/png;base64,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" />
      </g>
    </svg>
  </div>

  <style>
    div.external-svg {
      background-image: url(https://docraptor-production-cdn.s3.amazonaws.com/tutorials/raptor.svg);
      background-size: 240px;
      background-color: black;
      width: 240px;
      height: 172px;
    }
    div.inline-svg {
      background-color: #fe7816;
      width: 240px;
    }
  </style>
`;

config = {
  url: "https://api.docraptor.com/docs",
  method: "post",
  responseType: "arraybuffer", //IMPORTANT! Required to fetch the binary PDF
  headers: {
    "Content-Type": "application/json"
  },
  data: {
    user_credentials: "YOUR_API_KEY_HERE", // this key works in test mode!
    doc: {
      test: true, // test documents are free but watermarked
      document_type: "pdf",
      document_content: document_content
      // document_url: "https://docraptor.com/examples/invoice.html",
      // javascript: true,
      // prince_options: {
      //   media: "print", // @media 'screen' or 'print' CSS
      //   baseurl: "https://yoursite.com", // the base URL for any relative URLs
      //   }
    }
  }
};

axios(config)
  .then(function(response) {
    fs.writeFile("vector-images.pdf", response.data, "binary", function(writeErr) {
      if (writeErr) throw writeErr;
      console.log("Saved vector-images.pdf!");
    });
  })
  .catch(function(error) {
    // DocRaptor error messages are contained in the response body
    // Since the response is binary encoded, let's decode
    var decoder = new TextDecoder("utf-8");
    console.log(decoder.decode(error.response.data));
  });

Downloads

Here are all the files you need to follow this tutorial:

Download Node Code Download HTML Download PDF

Installing the PHP Agent

composer require docraptor/docraptor

Generating the Document

The API key shown here, YOUR_API_KEY_HERE, actually works! Use it for testing without creating an account. The only requirement is test mode must be used (test parameter set to true).

<?php

require_once __DIR__ . "/vendor/autoload.php";

$docraptor = new DocRaptor\DocApi();
# this key works in test mode!
$docraptor->getConfig()->setUsername("YOUR_API_KEY_HERE");

$document_content = <<<DOCUMENT_CONTENT
  <h2>Vector Images</h2>
  <div class="external-svg"></div>
  <div class="inline-svg">
    <svg viewBox="0 0 60 43" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <defs>
        <path id="a" d="M5.823.355l-5.448 5.5h13.008l-7.56-5.5" />
        <mask id="o" fill="#fff">
          <use xlink:href="#a" />
        </mask>
        <path id="b" d="M5.823.355l-5.448 5.5 5.448-5.5" />
        <mask id="p" fill="#fff">
          <use xlink:href="#b" />
        </mask>
        <path d="M.467 6.437l1.863.322-1.863-.324m6.306-6.73l-.06.066 2.185 3.374-2.125-3.44" id="c" />
        <mask id="q" fill="#fff">
          <use xlink:href="#c" />
        </mask>
        <path id="d" d="M6.712-.228L.467 6.437l1.863.322 6.568-3.615L6.712-.228" />
        <mask id="r" fill="#fff">
          <use xlink:href="#d" />
        </mask>
        <path id="e" d="M2.303-.037L-.13 13.123l1.964.34 1.88-13 .01-.054-1.42-.448" />
        <mask id="s" fill="#fff">
          <use xlink:href="#e" />
        </mask>
        <path id="f" d="M2.303-.037L-.13 13.123l1.964.34 1.88-13 .01-.054-1.42-.448" />
        <mask id="t" fill="#fff">
          <use xlink:href="#f" />
        </mask>
        <path id="g" d="M-.277.41l-.008.05.008-.05" />
        <mask id="u" fill="#fff">
          <use xlink:href="#g" />
        </mask>
        <path id="h" d="M-.277.41l-.008.05.008-.05" />
        <mask id="v" fill="#fff">
          <use xlink:href="#h" />
        </mask>
        <path id="i" d="M9.49.093L.066 12.003 9.49.093" />
        <mask id="w" fill="#fff">
          <use xlink:href="#i" />
        </mask>
        <path id="j" d="M9.49.094L.067 12.004l15.216-2.856-.02-3.672L9.49.094" />
        <mask id="x" fill="#fff">
          <use xlink:href="#j" />
        </mask>
        <path id="k" d="M.26.476l.022 3.672L.262.475" />
        <mask id="y" fill="#fff">
          <use xlink:href="#k" />
        </mask>
        <path id="l" d="M8.418.436L.066 2.004l9.73 8.173-1.38-9.74" />
        <mask id="z" fill="#fff">
          <use xlink:href="#l" />
        </mask>
        <path id="m" d="M-.08-.13l9.915 1.275 2.683 10.564L9.835 1.143-.08-.128" />
        <mask id="A" fill="#fff">
          <use xlink:href="#m" />
        </mask>
        <path id="n" d="M2.92-.13L-.165 21.88l5.33.88L15.52 11.71 12.835 1.146 2.92-.128" />
        <mask id="B" fill="#fff">
          <use xlink:href="#n" />
        </mask>
      </defs>
      <g fill="none" fill-rule="evenodd">
        <path d="M24.283 27.147L9.066 30.004l9.426-11.91 5.77 5.382.02 3.67" fill="#253B76" />
        <path d="M52.898 25.146l-5.48-8.46-8.11-2.76-2.44 13.198 9.462 1.635 6.568-3.615" fill="#24366C" />
        <path d="M9.066 30.004l9.73 8.173-1.378-9.74-8.352 1.567" fill="#252E65" />
        <path d="M24.375 42.855h13.008l-7.56-5.5-5.448 5.5" fill="#243B77" />
        <path d="M50.217-.098l9.41 5.97v2.273L41.92 5.87l8.297-5.968" fill="#3877B1" />
        <path d="M52.898 25.146l-1.214 5.21-1.82-3.54 3.034-1.67" fill="#242C62" />
        <path d="M39.415 13.37L-.08.77l24.34 22.706L39.416 13.37" fill="#E5E1DB" />
        <path d="M39.415 13.37l-3.347 17.68-11.693 11.805-.114-19.38L39.417 13.37" fill="#144C8E" />
        <path d="M51.835 7.145l2.683 10.564-10.353 11.05-5.33-.883L41.92 5.87l9.915 1.275" fill="#1C5C9E" />
        <path d="M39.415 13.37L-.08.77l24.34 22.706L39.416 13.37" fill="#135697" />
        <path d="M5.823.355l-5.448 5.5h13.008l-7.56-5.5" mask="url(#o)" transform="translate(24 37)" />
        <path d="M5.823.355l-5.448 5.5 5.448-5.5" mask="url(#p)" transform="translate(24 37)" />
        <path d="M.467 6.437l1.863.322-1.863-.324m6.306-6.73l-.06.066 2.185 3.374-2.125-3.44" mask="url(#q)"
          transform="translate(44 22)" />
        <path d="M6.712-.228L.467 6.437l1.863.322 6.568-3.615L6.712-.228" mask="url(#r)" transform="translate(44 22)" />
        <path d="M2.303-.037L-.13 13.123l1.964.34 1.88-13 .01-.054-1.42-.448" mask="url(#s)"
          transform="translate(37 14)" />
        <path d="M2.303-.037L-.13 13.123l1.964.34 1.88-13 .01-.054-1.42-.448" mask="url(#t)"
          transform="translate(37 14)" />
        <path d="M-.277.41l-.008.05.008-.05" mask="url(#u)" transform="translate(41 14)" />
        <path d="M-.277.41l-.008.05.008-.05" mask="url(#v)" transform="translate(41 14)" />
        <path d="M9.49.093L.066 12.003 9.49.093" mask="url(#w)" transform="translate(9 18)" />
        <path d="M9.49.094L.067 12.004l15.216-2.856-.02-3.672L9.49.094" mask="url(#x)" transform="translate(9 18)" />
        <path d="M.26.476l.022 3.672L.262.475" mask="url(#y)" transform="translate(24 23)" />
        <path d="M8.418.436L.066 2.004l9.73 8.173-1.38-9.74" mask="url(#z)" transform="translate(9 28)" />
        <path d="M-.08-.13l9.915 1.275 2.683 10.564L9.835 1.143-.08-.128" mask="url(#A)" transform="translate(42 6)" />
        <path d="M2.92-.13L-.165 21.88l5.33.88L15.52 11.71 12.835 1.146 2.92-.128" mask="url(#B)"
          transform="translate(39 6)" />
        <image x="46.92" y="26" width="4.8" height="-4.8"
          xlink:href="data:image/png;base64,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" />
      </g>
    </svg>
  </div>

  <style>
    div.external-svg {
      background-image: url(https://docraptor-production-cdn.s3.amazonaws.com/tutorials/raptor.svg);
      background-size: 240px;
      background-color: black;
      width: 240px;
      height: 172px;
    }
    div.inline-svg {
      background-color: #fe7816;
      width: 240px;
    }
  </style>
DOCUMENT_CONTENT;

try {
    $doc = new DocRaptor\Doc();
    $doc->setTest(true); # test documents are free but watermarked
    $doc->setDocumentType("pdf");
    $doc->setDocumentContent($document_content);
    # $doc->setDocumentUrl("https://docraptor.com/examples/invoice.html");
    # $doc->setJavascript(true);
    # $prince_options = new DocRaptor\PrinceOptions();
    # $doc->setPrinceOptions($prince_options);
    # $prince_options->setMedia("print"); # @media 'screen' or 'print' CSS
    # $prince_options->setBaseurl("https://yoursite.com"); # the base URL for any relative URLs

    $response = $docraptor->createDoc($doc);

    # createDoc() returns a binary string
    file_put_contents("vector-images.pdf", $response);
    echo "Successfully created vector-images.pdf!";
} catch (DocRaptor\ApiException $error) {
    echo $error . "\n";
    echo $error->getMessage() . "\n";
    echo $error->getCode() . "\n";
    echo $error->getResponseBody() . "\n";
}

Downloads

Here are all the files you need to follow this tutorial:

Download PHP Code Download HTML Download PDF

Installing the Python Agent

pip install --upgrade docraptor

Generating the Document

The API key shown here, YOUR_API_KEY_HERE, actually works! Use it for testing without creating an account. The only requirement is test mode must be used (test parameter set to true).

import docraptor

doc_api = docraptor.DocApi()
# this key works in test mode!
doc_api.api_client.configuration.username = 'YOUR_API_KEY_HERE'

document_content = r"""
    <h2>Vector Images</h2>
    <div class="external-svg"></div>
    <div class="inline-svg">
      <svg viewBox="0 0 60 43" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <defs>
          <path id="a" d="M5.823.355l-5.448 5.5h13.008l-7.56-5.5" />
          <mask id="o" fill="#fff">
            <use xlink:href="#a" />
          </mask>
          <path id="b" d="M5.823.355l-5.448 5.5 5.448-5.5" />
          <mask id="p" fill="#fff">
            <use xlink:href="#b" />
          </mask>
          <path d="M.467 6.437l1.863.322-1.863-.324m6.306-6.73l-.06.066 2.185 3.374-2.125-3.44" id="c" />
          <mask id="q" fill="#fff">
            <use xlink:href="#c" />
          </mask>
          <path id="d" d="M6.712-.228L.467 6.437l1.863.322 6.568-3.615L6.712-.228" />
          <mask id="r" fill="#fff">
            <use xlink:href="#d" />
          </mask>
          <path id="e" d="M2.303-.037L-.13 13.123l1.964.34 1.88-13 .01-.054-1.42-.448" />
          <mask id="s" fill="#fff">
            <use xlink:href="#e" />
          </mask>
          <path id="f" d="M2.303-.037L-.13 13.123l1.964.34 1.88-13 .01-.054-1.42-.448" />
          <mask id="t" fill="#fff">
            <use xlink:href="#f" />
          </mask>
          <path id="g" d="M-.277.41l-.008.05.008-.05" />
          <mask id="u" fill="#fff">
            <use xlink:href="#g" />
          </mask>
          <path id="h" d="M-.277.41l-.008.05.008-.05" />
          <mask id="v" fill="#fff">
            <use xlink:href="#h" />
          </mask>
          <path id="i" d="M9.49.093L.066 12.003 9.49.093" />
          <mask id="w" fill="#fff">
            <use xlink:href="#i" />
          </mask>
          <path id="j" d="M9.49.094L.067 12.004l15.216-2.856-.02-3.672L9.49.094" />
          <mask id="x" fill="#fff">
            <use xlink:href="#j" />
          </mask>
          <path id="k" d="M.26.476l.022 3.672L.262.475" />
          <mask id="y" fill="#fff">
            <use xlink:href="#k" />
          </mask>
          <path id="l" d="M8.418.436L.066 2.004l9.73 8.173-1.38-9.74" />
          <mask id="z" fill="#fff">
            <use xlink:href="#l" />
          </mask>
          <path id="m" d="M-.08-.13l9.915 1.275 2.683 10.564L9.835 1.143-.08-.128" />
          <mask id="A" fill="#fff">
            <use xlink:href="#m" />
          </mask>
          <path id="n" d="M2.92-.13L-.165 21.88l5.33.88L15.52 11.71 12.835 1.146 2.92-.128" />
          <mask id="B" fill="#fff">
            <use xlink:href="#n" />
          </mask>
        </defs>
        <g fill="none" fill-rule="evenodd">
          <path d="M24.283 27.147L9.066 30.004l9.426-11.91 5.77 5.382.02 3.67" fill="#253B76" />
          <path d="M52.898 25.146l-5.48-8.46-8.11-2.76-2.44 13.198 9.462 1.635 6.568-3.615" fill="#24366C" />
          <path d="M9.066 30.004l9.73 8.173-1.378-9.74-8.352 1.567" fill="#252E65" />
          <path d="M24.375 42.855h13.008l-7.56-5.5-5.448 5.5" fill="#243B77" />
          <path d="M50.217-.098l9.41 5.97v2.273L41.92 5.87l8.297-5.968" fill="#3877B1" />
          <path d="M52.898 25.146l-1.214 5.21-1.82-3.54 3.034-1.67" fill="#242C62" />
          <path d="M39.415 13.37L-.08.77l24.34 22.706L39.416 13.37" fill="#E5E1DB" />
          <path d="M39.415 13.37l-3.347 17.68-11.693 11.805-.114-19.38L39.417 13.37" fill="#144C8E" />
          <path d="M51.835 7.145l2.683 10.564-10.353 11.05-5.33-.883L41.92 5.87l9.915 1.275" fill="#1C5C9E" />
          <path d="M39.415 13.37L-.08.77l24.34 22.706L39.416 13.37" fill="#135697" />
          <path d="M5.823.355l-5.448 5.5h13.008l-7.56-5.5" mask="url(#o)" transform="translate(24 37)" />
          <path d="M5.823.355l-5.448 5.5 5.448-5.5" mask="url(#p)" transform="translate(24 37)" />
          <path d="M.467 6.437l1.863.322-1.863-.324m6.306-6.73l-.06.066 2.185 3.374-2.125-3.44" mask="url(#q)"
            transform="translate(44 22)" />
          <path d="M6.712-.228L.467 6.437l1.863.322 6.568-3.615L6.712-.228" mask="url(#r)" transform="translate(44 22)" />
          <path d="M2.303-.037L-.13 13.123l1.964.34 1.88-13 .01-.054-1.42-.448" mask="url(#s)"
            transform="translate(37 14)" />
          <path d="M2.303-.037L-.13 13.123l1.964.34 1.88-13 .01-.054-1.42-.448" mask="url(#t)"
            transform="translate(37 14)" />
          <path d="M-.277.41l-.008.05.008-.05" mask="url(#u)" transform="translate(41 14)" />
          <path d="M-.277.41l-.008.05.008-.05" mask="url(#v)" transform="translate(41 14)" />
          <path d="M9.49.093L.066 12.003 9.49.093" mask="url(#w)" transform="translate(9 18)" />
          <path d="M9.49.094L.067 12.004l15.216-2.856-.02-3.672L9.49.094" mask="url(#x)" transform="translate(9 18)" />
          <path d="M.26.476l.022 3.672L.262.475" mask="url(#y)" transform="translate(24 23)" />
          <path d="M8.418.436L.066 2.004l9.73 8.173-1.38-9.74" mask="url(#z)" transform="translate(9 28)" />
          <path d="M-.08-.13l9.915 1.275 2.683 10.564L9.835 1.143-.08-.128" mask="url(#A)" transform="translate(42 6)" />
          <path d="M2.92-.13L-.165 21.88l5.33.88L15.52 11.71 12.835 1.146 2.92-.128" mask="url(#B)"
            transform="translate(39 6)" />
          <image x="46.92" y="26" width="4.8" height="-4.8"
            xlink:href="data:image/png;base64,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" />
        </g>
      </svg>
    </div>

    <style>
      div.external-svg {
        background-image: url(https://docraptor-production-cdn.s3.amazonaws.com/tutorials/raptor.svg);
        background-size: 240px;
        background-color: black;
        width: 240px;
        height: 172px;
      }
      div.inline-svg {
        background-color: #fe7816;
        width: 240px;
      }
    </style>
"""

try:
    response = doc_api.create_doc({
        'test': True,  # test documents are free but watermarked
        'document_type': 'pdf',
        'document_content': document_content,
        # 'document_url': 'https://docraptor.com/examples/invoice.html',
        # 'javascript': True,
        # 'prince_options': # {
        #    'media': 'print', # @media 'screen' or 'print' CSS
        #    'baseurl': 'https://yoursite.com', # the base URL for any relative URLs
        # },
    })

    # create_doc() returns a binary string
    with open('vector-images.pdf', 'w+b') as f:
        binary_formatted_response = bytearray(response)
        f.write(binary_formatted_response)
        f.close()
    print('Successfully created vector-images.pdf!')
except docraptor.rest.ApiException as error:
    print(error.status)
    print(error.reason)
    print(error.body)

Downloads

Here are all the files you need to follow this tutorial:

Download Python Code Download HTML Download PDF

Installing the Ruby Agent

Add or require the docraptor gem to your project or script.

Generating the Document

The API key shown here, YOUR_API_KEY_HERE, actually works! Use it for testing without creating an account. The only requirement is test mode must be used (test parameter set to true).

require "docraptor"

DocRaptor.configure do |config|
  config.username = "YOUR_API_KEY_HERE" # this key works in test mode!
end

docraptor = DocRaptor::DocApi.new

document_content = <<~'DOCUMENT_CONTENT'
  <h2>Vector Images</h2>
  <div class="external-svg"></div>
  <div class="inline-svg">
    <svg viewBox="0 0 60 43" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <defs>
        <path id="a" d="M5.823.355l-5.448 5.5h13.008l-7.56-5.5" />
        <mask id="o" fill="#fff">
          <use xlink:href="#a" />
        </mask>
        <path id="b" d="M5.823.355l-5.448 5.5 5.448-5.5" />
        <mask id="p" fill="#fff">
          <use xlink:href="#b" />
        </mask>
        <path d="M.467 6.437l1.863.322-1.863-.324m6.306-6.73l-.06.066 2.185 3.374-2.125-3.44" id="c" />
        <mask id="q" fill="#fff">
          <use xlink:href="#c" />
        </mask>
        <path id="d" d="M6.712-.228L.467 6.437l1.863.322 6.568-3.615L6.712-.228" />
        <mask id="r" fill="#fff">
          <use xlink:href="#d" />
        </mask>
        <path id="e" d="M2.303-.037L-.13 13.123l1.964.34 1.88-13 .01-.054-1.42-.448" />
        <mask id="s" fill="#fff">
          <use xlink:href="#e" />
        </mask>
        <path id="f" d="M2.303-.037L-.13 13.123l1.964.34 1.88-13 .01-.054-1.42-.448" />
        <mask id="t" fill="#fff">
          <use xlink:href="#f" />
        </mask>
        <path id="g" d="M-.277.41l-.008.05.008-.05" />
        <mask id="u" fill="#fff">
          <use xlink:href="#g" />
        </mask>
        <path id="h" d="M-.277.41l-.008.05.008-.05" />
        <mask id="v" fill="#fff">
          <use xlink:href="#h" />
        </mask>
        <path id="i" d="M9.49.093L.066 12.003 9.49.093" />
        <mask id="w" fill="#fff">
          <use xlink:href="#i" />
        </mask>
        <path id="j" d="M9.49.094L.067 12.004l15.216-2.856-.02-3.672L9.49.094" />
        <mask id="x" fill="#fff">
          <use xlink:href="#j" />
        </mask>
        <path id="k" d="M.26.476l.022 3.672L.262.475" />
        <mask id="y" fill="#fff">
          <use xlink:href="#k" />
        </mask>
        <path id="l" d="M8.418.436L.066 2.004l9.73 8.173-1.38-9.74" />
        <mask id="z" fill="#fff">
          <use xlink:href="#l" />
        </mask>
        <path id="m" d="M-.08-.13l9.915 1.275 2.683 10.564L9.835 1.143-.08-.128" />
        <mask id="A" fill="#fff">
          <use xlink:href="#m" />
        </mask>
        <path id="n" d="M2.92-.13L-.165 21.88l5.33.88L15.52 11.71 12.835 1.146 2.92-.128" />
        <mask id="B" fill="#fff">
          <use xlink:href="#n" />
        </mask>
      </defs>
      <g fill="none" fill-rule="evenodd">
        <path d="M24.283 27.147L9.066 30.004l9.426-11.91 5.77 5.382.02 3.67" fill="#253B76" />
        <path d="M52.898 25.146l-5.48-8.46-8.11-2.76-2.44 13.198 9.462 1.635 6.568-3.615" fill="#24366C" />
        <path d="M9.066 30.004l9.73 8.173-1.378-9.74-8.352 1.567" fill="#252E65" />
        <path d="M24.375 42.855h13.008l-7.56-5.5-5.448 5.5" fill="#243B77" />
        <path d="M50.217-.098l9.41 5.97v2.273L41.92 5.87l8.297-5.968" fill="#3877B1" />
        <path d="M52.898 25.146l-1.214 5.21-1.82-3.54 3.034-1.67" fill="#242C62" />
        <path d="M39.415 13.37L-.08.77l24.34 22.706L39.416 13.37" fill="#E5E1DB" />
        <path d="M39.415 13.37l-3.347 17.68-11.693 11.805-.114-19.38L39.417 13.37" fill="#144C8E" />
        <path d="M51.835 7.145l2.683 10.564-10.353 11.05-5.33-.883L41.92 5.87l9.915 1.275" fill="#1C5C9E" />
        <path d="M39.415 13.37L-.08.77l24.34 22.706L39.416 13.37" fill="#135697" />
        <path d="M5.823.355l-5.448 5.5h13.008l-7.56-5.5" mask="url(#o)" transform="translate(24 37)" />
        <path d="M5.823.355l-5.448 5.5 5.448-5.5" mask="url(#p)" transform="translate(24 37)" />
        <path d="M.467 6.437l1.863.322-1.863-.324m6.306-6.73l-.06.066 2.185 3.374-2.125-3.44" mask="url(#q)"
          transform="translate(44 22)" />
        <path d="M6.712-.228L.467 6.437l1.863.322 6.568-3.615L6.712-.228" mask="url(#r)" transform="translate(44 22)" />
        <path d="M2.303-.037L-.13 13.123l1.964.34 1.88-13 .01-.054-1.42-.448" mask="url(#s)"
          transform="translate(37 14)" />
        <path d="M2.303-.037L-.13 13.123l1.964.34 1.88-13 .01-.054-1.42-.448" mask="url(#t)"
          transform="translate(37 14)" />
        <path d="M-.277.41l-.008.05.008-.05" mask="url(#u)" transform="translate(41 14)" />
        <path d="M-.277.41l-.008.05.008-.05" mask="url(#v)" transform="translate(41 14)" />
        <path d="M9.49.093L.066 12.003 9.49.093" mask="url(#w)" transform="translate(9 18)" />
        <path d="M9.49.094L.067 12.004l15.216-2.856-.02-3.672L9.49.094" mask="url(#x)" transform="translate(9 18)" />
        <path d="M.26.476l.022 3.672L.262.475" mask="url(#y)" transform="translate(24 23)" />
        <path d="M8.418.436L.066 2.004l9.73 8.173-1.38-9.74" mask="url(#z)" transform="translate(9 28)" />
        <path d="M-.08-.13l9.915 1.275 2.683 10.564L9.835 1.143-.08-.128" mask="url(#A)" transform="translate(42 6)" />
        <path d="M2.92-.13L-.165 21.88l5.33.88L15.52 11.71 12.835 1.146 2.92-.128" mask="url(#B)"
          transform="translate(39 6)" />
        <image x="46.92" y="26" width="4.8" height="-4.8"
          xlink:href="data:image/png;base64,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" />
      </g>
    </svg>
  </div>

  <style>
    div.external-svg {
      background-image: url(https://docraptor-production-cdn.s3.amazonaws.com/tutorials/raptor.svg);
      background-size: 240px;
      background-color: black;
      width: 240px;
      height: 172px;
    }
    div.inline-svg {
      background-color: #fe7816;
      width: 240px;
    }
  </style>
DOCUMENT_CONTENT

begin
  response = docraptor.create_doc(
    test: true, # test documents are free but watermarked
    document_type: "pdf",
    document_content: document_content,
    # document_url: "https://docraptor.com/examples/invoice.html",
    # javascript: true,
    # prince_options: {
    #   media: "print", # @media 'screen' or 'print' CSS
    #   baseurl: "https://yoursite.com", # the base URL for any relative URLs
    # }
  )

  # create_doc() returns a binary string
  File.write("vector-images.pdf", response, mode: "wb")
  puts "Successfully created vector-images.pdf!"
rescue DocRaptor::ApiError => error
  puts "#{error.class}: #{error.message}"
  puts error.code
  puts error.response_body
  puts error.backtrace[0..3].join("\n")
end

Downloads

Here are all the files you need to follow this tutorial:

Download Ruby Code Download HTML Download PDF

How to create a PDF with Vector Images

External SVGs

Inline SVGs

Convert SVGs directly into PDFs

Using DocRaptor's API

Generating the Document with cURL

Downloads

Related Tutorials & Documentation

Frameworks supported

Dependencies

Installing the .NET Agent

Generating the Document

Downloads

Related Tutorials & Documentation

Install the Java Agent

Generating the Document

Downloads

Related Tutorials & Documentation

The DocRaptor JavaScript Library

JavaScript Example

Downloads

Related Tutorials & Documentation

DocRaptor & Node.js

Install the Axios Module

Generating the Document

Downloads

Related Tutorials & Documentation

Installing the PHP Agent

Generating the Document

Downloads

Related Tutorials & Documentation

Installing the Python Agent

Generating the Document

Downloads

Related Tutorials & Documentation

Installing the Ruby Agent

Generating the Document

Downloads

Related Tutorials & Documentation

Ready to get started? Try DocRaptor for free with unlimited test documents.