pygal/docs/documentation/web.rst

Embedding in a web page
=======================


Within an embed tag
-------------------

First setup an url entry point for you svg: `/mysvg.svg` don't forget to set the mime-type to `image/svg+xml`. (If you are using flask you can use the `render_response` method.)

Then in your html put an embed tag like this:

.. code-block:: html

  <!DOCTYPE html>
  <html>
    <head>
      <!-- ... -->
    </head>
    <body>
      <figure>
        <embed type="image/svg+xml" src="/mysvg.svg" />
      </figure>
    </body>
  </html>

You can also use an iframe tag, but automatic sizing with `width: 100%` will not work.


Directly in the html
--------------------

You can insert it directly in a html page with the use of `disable_xml_declaration`.
You have to put the javascript manually in you webpage, for instance:


.. code-block:: html

  <!DOCTYPE html>
  <html>
    <head>
    <script type="text/javascript" src="http://kozea.github.com/pygal.js/latest/pygal-tooltips.js"></script>
      <!-- ... -->
    </head>
    <body>
      <figure>
        <!-- Pygal render() result: -->
        <svg
          xmlns:xlink="http://www.w3.org/1999/xlink"
          xmlns="http://www.w3.org/2000/svg"
          id="chart-e6700c90-7a2b-4602-961c-83ccf5e59204"
          class="pygal-chart"
          viewBox="0 0 800 600">
          <!--Generated with pygal 1.0.0 ©Kozea 2011-2013 on 2013-06-25-->
          <!--http://pygal.org-->
          <!--http://github.com/Kozea/pygal-->
          <defs>
            <!-- ... -->
          </defs>
          <title>Pygal</title>
          <g class="graph bar-graph vertical">
            <!-- ... -->
          </g>
        </svg>
        <!-- End of Pygal render() result: -->
      </figure>
    </body>
  </html>

You can use `explicit_size` to set the svg size from the `width`, `height` properties.
Working on porting doc 10 years ago			`Embedding in a web page`
			`=======================`


			`Within an embed tag`
			`-------------------`

			First setup an url entry point for you svg: `/mysvg.svg` don't forget to set the mime-type to `image/svg+xml`. (If you are using flask you can use the `render_response` method.)

			`Then in your html put an embed tag like this:`

			`.. code-block:: html`

			`<!DOCTYPE html>`
			`<html>`
			`<head>`
			`<!-- ... -->`
			`</head>`
			`<body>`
			`<figure>`
			`<embed type="image/svg+xml" src="/mysvg.svg" />`
			`</figure>`
			`</body>`
			`</html>`

			You can also use an iframe tag, but automatic sizing with `width: 100%` will not work.


			`Directly in the html`
			`--------------------`

			You can insert it directly in a html page with the use of `disable_xml_declaration`.
			`You have to put the javascript manually in you webpage, for instance:`


			`.. code-block:: html`

			`<!DOCTYPE html>`
			`<html>`
			`<head>`
New js 9 years ago			`<script type="text/javascript" src="http://kozea.github.com/pygal.js/latest/pygal-tooltips.js"></script>`
Working on porting doc 10 years ago			`<!-- ... -->`
			`</head>`
			`<body>`
			`<figure>`
			`<!-- Pygal render() result: -->`
			`<svg`
			`xmlns:xlink="http://www.w3.org/1999/xlink"`
			`xmlns="http://www.w3.org/2000/svg"`
			`id="chart-e6700c90-7a2b-4602-961c-83ccf5e59204"`
			`class="pygal-chart"`
			`viewBox="0 0 800 600">`
			`<!--Generated with pygal 1.0.0 ©Kozea 2011-2013 on 2013-06-25-->`
			`<!--http://pygal.org-->`
			`<!--http://github.com/Kozea/pygal-->`
			`<defs>`
			`<!-- ... -->`
			`</defs>`
			`<title>Pygal</title>`
			`<g class="graph bar-graph vertical">`
			`<!-- ... -->`
			`</g>`
			`</svg>`
			`<!-- End of Pygal render() result: -->`
			`</figure>`
			`</body>`
			`</html>`

			You can use `explicit_size` to set the svg size from the `width`, `height` properties.