Pygalを使ってPythonで美しいSVG画像を生成する方法を詳しく解説-Python チュートリアル-php.cn

Pygalを使ってPythonで美しいSVG画像を生成する方法を詳しく解説

高洛峰

リリース： 2017-02-13 16:23:58

オリジナル

3770 人が閲覧しました

はじめに

SVG は、現在最も一般的な画像ファイル形式と言えます。英語の正式名は Scalable Vector Graphics で、スケーラブルなベクトルグラフィックスを意味します。これは XML (Extensible Markup Language) に基づいており、World Wide Web Consortium (W3C) アライアンスによって開発されました。厳密に言えば、これはエキサイティングな高解像度の Web グラフィックページをデザインできるオープン標準のベクターグラフィック言語である必要があります。ユーザーは、コードを使用して画像を直接描画したり、ワードプロセッサツールで SVG 画像を開いたり、コードの一部を変更して画像をインタラクティブにしたり、いつでも画像を HTML に挿入してブラウザで表示したりできます。

Pygalの最初のヘッド

まずpygalをインストールします:

pip install pygal

ログイン後にコピー

生成された形式をpng、jpgなどのsvg以外の形式に設定したい場合は、以下をインストールする必要があります以下のライブラリがあります:

pip install lxml

ログイン後にコピー

Ubuntuでは、次のプロンプトに従ってインストールできます:

sudo apt-get install libxml2-dev libxslt1-dev python-dev
sudo apt-get install python-lxml
pip install cairosvg

ログイン後にコピー

このライブラリをインストールする原理は上記と同じです:

sudo apt-get install python-cairosvg

ログイン後にコピー

以下の 2 つのライブラリは通常の pip のみが必要です。インストールするだけです:

pip install tinycss

pip install cssselect

ログイン後にコピー

Hello SVG

import pygal              
bar_chart = pygal.Bar()           
bar_chart.add(&#39;Fibonacci&#39;, [0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55]) 
bar_chart.render_to_file(&#39;Hello.svg&#39;)

ログイン後にコピー

黒い Hello.svg ファイルが生成されます。これは svg 形式なので、直接開くことはできません。デフォルトのものを選択してください。ブラウザを開くと、次のような画像が表示されます:

Pygalを使ってPythonで美しいSVG画像を生成する方法を詳しく解説

import pygal
line_chart = pygal.Line()
line_chart.title = &#39;Browser usage evolution (in %)&#39;
line_chart.x_labels = map(str, range(2002, 2013))
line_chart.add(&#39;Firefox&#39;, [None, None, 0, 16.6, 25, 31, 36.4, 45.5, 46.3, 42.8, 37.1])
line_chart.add(&#39;Chrome&#39;, [None, None, None, None, None, None, 0, 3.9, 10.8, 23.8, 35.3])
line_chart.add(&#39;IE&#39;,  [85.8, 84.6, 84.7, 74.5, 66, 58.6, 54.7, 44.8, 36.2, 26.6, 20.1])
line_chart.add(&#39;Others&#39;, [14.2, 15.4, 15.3, 8.9, 9, 10.4, 8.9, 5.8, 6.7, 6.8, 7.5])
line_chart.render_to_file(&#39;Hello_line_chart.svg&#39;)

ログイン後にコピー

生成された画像は次のようになります:

こんにちは PNG

Pygalを使ってPythonで美しいSVG画像を生成する方法を詳しく解説

場合によっては、SVG が必要なく、png 形式のグラフだけが必要な場合もあります。それは問題ではありません。pygal でも実行できます:

import pygal
bar_chart = pygal.Bar()
bar_chart.add(&#39;Fibonacci&#39;, [0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55])
bar_chart.render_to_file(&#39;bar_chart.svg&#39;)
# 生成 png 格式图表
bar_chart.render_to_png(filename=&#39;bar_chart.png&#39;)

ログイン後にコピー

緑色のマークに注目してください。 png 形式の画像が正常に生成されました:

こんにちは Flask と Pygal

Pygalを使ってPythonで美しいSVG画像を生成する方法を詳しく解説

Pygal によって生成された svg 形式の画像を Web ページに表示させます:

pip install flask

ログイン後にコピー

コアコードは次のとおりです。はい、とても短いです:

import pygal
from flask import Flask, Response

app = Flask(__name__)

@app.route(&#39;/&#39;)
def index():
 return 
"""
 <html>
 <body>
  <h1>hello pygal and flask</h1>
  <figure>
  <embed type="image/svg+xml" src="/hellosvg/" />
  </figure>
 </body>
 </html>&#39;
"""

@app.route(&#39;/hellosvg/&#39;)
def graph():
 """ render svg graph """
 bar_chart = pygal.Bar()
 bar_chart.add(&#39;Fibonacci&#39;, [0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55])
 return Response(response=bar_chart.render(), content_type=&#39;image/svg+xml&#39;)

if __name__ == &#39;__main__&#39;:
 app.run()

ログイン後にコピー

127.0.0.1:5000 を開くと、次の内容が表示されます:

もちろん、次のようにすることもできます。もっとクールな svg 画像がありますが、それらはすべて pygal 使用法:

Pygalを使ってPythonで美しいSVG画像を生成する方法を詳しく解説