PySVGを使ってSVGグラフィックスを作成しよう！

はじめに:

PySVGは、Pythonを使ってSVG（Scalable Vector Graphics）を作成するための強力なライブラリです。このチュートリアルでは、PySVGの基本から応用まで、15章にわたって詳しく解説します。SVGの基礎知識からPySVGの高度な機能まで、段階的に学んでいきましょう。各章では、実践的なコード例と丁寧な説明を提供し、初心者から上級者まで楽しく学べる内容となっています。

第1章: PySVGの基本

PySVGは、PythonでSVGを簡単に作成できるライブラリです。SVGは、ベクターグラフィックスを表現するXMLベースの形式で、拡大縮小しても品質が劣化しない特徴があります。この章では、PySVGのインストール方法と基本的な使い方を学びます。

# PySVGのインストール
!pip install pysvg-py3

# 基本的な使い方
from pysvg.structure import Svg
from pysvg.shape import Rect

# SVG要素の作成
svg = Svg(width=200, height=100)

# 長方形の作成
rect = Rect(x=10, y=10, width=180, height=80, fill="red")

# SVGに長方形を追加
svg.addElement(rect)

# SVGを保存
svg.save("my_first_svg.svg")

第2章: 基本図形の描画

PySVGを使って、円、長方形、直線などの基本図形を描画する方法を学びます。これらの図形は、より複雑なグラフィックスを作成する際の基礎となります。

from pysvg.structure import Svg
from pysvg.shape import Rect, Circle, Line

svg = Svg(width=300, height=200)

# 長方形
rect = Rect(x=10, y=10, width=100, height=80, fill="blue")
svg.addElement(rect)

# 円
circle = Circle(cx=200, cy=50, r=40, fill="green")
svg.addElement(circle)

# 直線
line = Line(x1=10, y1=150, x2=290, y2=150, stroke="red", stroke_width=2)
svg.addElement(line)

svg.save("basic_shapes.svg")

第3章: パスの描画

パスは、SVGで複雑な形状を描画するための強力なツールです。この章では、PySVGを使ってカスタムパスを作成し、曲線や複雑な図形を描く方法を学びます。

from pysvg.structure import Svg
from pysvg.shape import Path

svg = Svg(width=300, height=200)

# パスの作成
path = Path(d="M10 10 C 20 20, 40 20, 50 10", fill="none", stroke="purple", stroke_width=2)
svg.addElement(path)

# より複雑なパス
complex_path = Path(d="M100 100 L 200 100 L 150 50 Z", fill="orange", stroke="black", stroke_width=1)
svg.addElement(complex_path)

svg.save("paths.svg")

第4章: テキストの追加

SVGにテキストを追加することで、グラフィックスに説明や注釈を付けることができます。この章では、PySVGを使ってテキストを追加し、フォントやスタイルをカスタマイズする方法を学びます。

from pysvg.structure import Svg
from pysvg.text import Text

svg = Svg(width=300, height=200)

# 基本的なテキスト
text = Text("Hello, SVG!", x=20, y=50)
svg.addElement(text)

# スタイル付きテキスト
styled_text = Text("Styled Text", x=20, y=100)
styled_text.set_font_family("Arial")
styled_text.set_font_size(20)
styled_text.set_fill("blue")
svg.addElement(styled_text)

svg.save("text.svg")

第5章: グラデーションの適用

グラデーションを使うことで、SVGグラフィックスに深みと立体感を加えることができます。この章では、PySVGを使って線形グラデーションと放射状グラデーションを作成し、図形に適用する方法を学びます。

from pysvg.structure import Svg, Defs
from pysvg.gradient import LinearGradient, Stop
from pysvg.shape import Rect

svg = Svg(width=300, height=200)
defs = Defs()

# 線形グラデーションの定義
linear_gradient = LinearGradient("myGradient")
linear_gradient.add_stop(offset="0%", stop_color="#ff0000")
linear_gradient.add_stop(offset="100%", stop_color="#0000ff")
defs.addElement(linear_gradient)

svg.addElement(defs)

# グラデーションを適用した長方形
rect = Rect(x=10, y=10, width=280, height=180, fill="url(#myGradient)")
svg.addElement(rect)

svg.save("gradient.svg")

第6章: アニメーションの作成

SVGはアニメーションをサポートしており、PySVGを使って動的な要素を追加することができます。この章では、基本的なアニメーション効果を作成し、図形やテキストに適用する方法を学びます。

まずsvgwriteをインストールします。

pip install svgwrite

そして以下を実行します。

from svgwrite import Drawing
from svgwrite.animate import Animate

# Create a new SVG drawing
svg = Drawing("animation.svg", size=(300, 200))

# Create a circle
circle = svg.circle(center=(50, 100), r=20, fill="red")

# Create an animation
animate = Animate(attributeName="cx",
                  values="50;250",
                  dur="5s",
                  repeatCount="indefinite")

# Add the animation to the circle
circle.add(animate)

# Add the circle to the drawing
svg.add(circle)

# Save the SVG file
svg.save()

第7章: グループ化と変形

複数のSVG要素をグループ化することで、一括して操作や変形を適用できます。この章では、PySVGを使って要素をグループ化し、回転、拡大縮小、移動などの変形を適用する方法を学びます。

from pysvg.structure import Svg, G
from pysvg.shape import Rect, Circle
from pysvg.builders import TransformBuilder

svg = Svg(width=300, height=200)

# グループの作成
group = G()

# グループに図形を追加
rect = Rect(x=10, y=10, width=50, height=50, fill="blue")
circle = Circle(cx=60, cy=60, r=25, fill="red")
group.addElement(rect)
group.addElement(circle)

# グループに変形を適用
t = TransformBuilder()
t.setRotation(45, 60, 60)
group.set_transform(t.getTransform())

svg.addElement(group)

svg.save("group_transform.svg")

第8章: フィルターの適用

SVGフィルターを使用すると、ぼかし、シャドウ、光彩などの視覚効果を追加できます。この章では、PySVGを使って様々なフィルター効果を作成し、図形に適用する方法を学びます。

from pysvg.structure import Svg, Defs
from pysvg.filter import Filter, FeGaussianBlur
from pysvg.shape import Rect

svg = Svg(width=300, height=200)
defs = Defs()

# ぼかしフィルターの定義
filter = Filter(id="blurFilter")
blur = FeGaussianBlur(stdDeviation="5")
filter.addElement(blur)
defs.addElement(filter)

svg.addElement(defs)

# フィルターを適用した長方形
rect = Rect(x=50, y=50, width=200, height=100, fill="green", filter="url(#blurFilter)")
svg.addElement(rect)

svg.save("filter.svg")

画像の読み込みとフィルター適用

SVGでは画像を読み込み、さらにフィルターを適用することができます。これにより、画像に様々な視覚効果を追加することが可能です。以下に、画像を読み込んでぼかしフィルターを適用する例を示します。

import base64
from svgwrite import Drawing
from svgwrite.filters import Filter
from svgwrite.image import Image as SvgImage

# Function to encode the image
def encode_image(image_path):
    with open(image_path, "rb") as image_file:
        encoded_string = base64.b64encode(image_file.read()).decode('utf-8')
    return f"data:image/jpeg;base64,{encoded_string}"

# Create a new SVG drawing
dwg = Drawing('image_with_filter.svg', size=(300, 200))

# Define the filter
f = Filter(id='blur_filter')
f.feGaussianBlur(in_='SourceGraphic', stdDeviation=2)
dwg.defs.add(f)

# Load and encode the image
# Replace 'path/to/your/image.jpg' with the actual path to your image
image_path = 'path/to/your/image.jpg'
encoded_image = encode_image(image_path)

# Create the image element with the encoded data
image = SvgImage(href=encoded_image, insert=(0, 0), size=(300, 200))

# Apply the filter to the image
image['filter'] = f.get_funciri()

# Add the image to the drawing
dwg.add(image)

# Save the SVG file
dwg.save()

print(f"SVG file saved as 'image_with_filter.svg'")

このコードを実行すると、指定した画像がSVGに読み込まれ、ぼかしフィルターが適用された状態で保存されます。フィルターの種類や強度を変更することで、様々な視覚効果を実現できます。

第9章: マスクとクリッピング

マスクとクリッピングを使用すると、図形の一部を隠したり、特定の形状で切り抜いたりすることができます。この章では、PySVGを使ってマスクとクリッピングパスを作成し、適用する方法を学びます。

from pysvg.structure import Svg, Defs, Mask
from pysvg.shape import Rect, Circle

svg = Svg(width=300, height=200)
defs = Defs()

# マスクの定義
mask = Mask(id="myMask")
mask_circle = Circle(cx=150, cy=100, r=80, fill="white")
mask.addElement(mask_circle)
defs.addElement(mask)

svg.addElement(defs)

# マスクを適用した長方形
rect = Rect(x=0, y=0, width=300, height=200, fill="blue", mask="url(#myMask)")
svg.addElement(rect)

svg.save("mask.svg")

第10章: パターンの作成

パターンを使用すると、繰り返し模様や複雑な背景を簡単に作成できます。この章では、PySVGを使ってカスタムパターンを定義し、図形に適用する方法を学びます。

from pysvg.structure import Svg, Defs, Pattern
from pysvg.shape import Rect, Circle

svg = Svg(width=300, height=200)
defs = Defs()

# パターンの定義
pattern = Pattern(id="myPattern", width=20, height=20, patternUnits="userSpaceOnUse")
pattern_circle = Circle(cx=10, cy=10, r=5, fill="red")
pattern.addElement(pattern_circle)
defs.addElement(pattern)

svg.addElement(defs)

# パターンを適用した長方形
rect = Rect(x=0, y=0, width=300, height=200, fill="url(#myPattern)")
svg.addElement(rect)

svg.save("pattern.svg")

第11章: インタラクティブSVG

SVGはインタラクティブな要素をサポートしており、マウスイベントやアニメーションを組み合わせて動的なグラフィックスを作成できます。この章では、PySVGを使ってインタラクティブな要素を追加する方法を学びます。

from pysvg.structure import Svg
from pysvg.shape import Rect
from pysvg.animate import Set

svg = Svg(width=300, height=200)

# インタラクティブな長方形
rect = Rect(x=50, y=50, width=200, height=100, fill="blue")
set_animation = Set("fill", to="red", begin="mouseover", end="mouseout")
rect.addElement(set_animation)

svg.addElement(rect)

svg.save("interactive.svg")

第12章: SVGのスタイリング

CSSを使ってSVG要素のスタイルを定義することで、見た目をカスタマイズし、コードの再利用性を高めることができます。この章では、PySVGを使ってCSSスタイルを適用する方法を学びます。

from pysvg.structure import Svg, Style
from pysvg.shape import Rect, Circle

svg = Svg(width=300, height=200)

# スタイルの定義
style = Style()
style.setContentScript("""
    .myRect { fill: blue; stroke: black; stroke-width: 2; }
    .myCircle { fill: red; stroke: green; stroke-width: 3; }
""")
svg.addElement(style)

# スタイルを適用した図形
rect = Rect(x=50, y=50, width=100, height=100, class_="myRect")
circle = Circle(cx=200, cy=100, r=50, class_="myCircle")

svg.addElement(rect)
svg.addElement(circle)

svg.save("styled.svg")

第13章: SVGの最適化

大規模なSVGファイルは、ファイルサイズが大きくなり、読み込み時間が長くなる可能性があります。この章では、PySVGで作成したSVGを最適化し、パフォーマンスを向上させる方法を学びます。

from pysvg.structure import Svg
from pysvg.shape import Path
import svgutils.transform as st

# 複雑なSVGを作成
svg = Svg(width=300, height=200)
path = Path(d="M10 10 L 290 10 L 290 190 L 10 190 Z")
svg.addElement(path)

svg.save("original.svg")

# SVGの最適化
fig = st.fromfile("original.svg")
fig.save("optimized.svg")

print("Original size:", len(open("original.svg").read()), "bytes")
print("Optimized size:", len(open("optimized.svg").read()), "bytes")

第14章: SVGのエクスポートと変換

PySVGで作成したSVGを他の形式に変換したり、他のアプリケーションで使用したりする方法を学びます。この章では、SVGをPNG、PDF、その他の形式に変換する方法を紹介します。

from pysvg.structure import Svg
from pysvg.shape import Rect
import cairosvg

svg = Svg(width=300, height=200)
rect = Rect(x=50, y=50, width=200, height=100, fill="blue")
svg.addElement(rect)

# SVGをファイルに保存
svg.save("export.svg")

# SVGをPNGに変換
cairosvg.svg2png(url="export.svg", write_to="export.png")

# SVGをPDFに変換
cairosvg.svg2pdf(url="export.svg", write_to="export.pdf")

print("SVG exported and converted to PNG and PDF formats.")

第15章: 高度なSVGテクニック

この最終章では、これまでに学んだ技術を組み合わせて、より複雑で印象的なSVGグラフィックスを作成します。データ可視化、インフォグラフィックス、ロゴデザインなど、実践的な応用例を通じてPySVGの可能性を探ります。

from pysvg.structure import Svg, G
from pysvg.shape import Rect, Circle, Path
from pysvg.text import Text
from pysvg.builders import TransformBuilder

# 複雑なインフォグラフィックの作成
svg = Svg(width=500, height=300)

# 背景
background = Rect(x=0, y=0, width=500, height=300, fill="#f0f0f0")
svg.addElement(background)

# グラフ
graph = G()
for i in range(5):
    bar = Rect(x=50 + i*80, y=250 - i*40, width=60, height=i*40 + 40, fill="#4CAF50")
    graph.addElement(bar)
    label = Text(str(i*20 + 20) + "%", x=80 + i*80, y=270)
    label.set_font_size(12)
    graph.addElement(label)

svg.addElement(graph)

# ロゴ
logo = G()
circle = Circle(cx=400, cy=50, r=40, fill="#2196F3")
logo.addElement(circle)
logo_text = Text("PySVG", x=370, y=55)
logo_text.set_font_size(16)
logo_text.set_fill("white")
logo.addElement(logo_text)

t = TransformBuilder()
t.setRotation(-15, 400, 50)
logo.set_transform(t.getTransform())

svg.addElement(logo)

# 装飾的な要素
decoration = Path(d="M10,150 Q250,50 490,150", fill="none", stroke="#FFC107", stroke_width=2)
svg.addElement(decoration)

# タイトル
title = Text("PySVG Infographic", x=20, y=30)
title.set_font_size(24)
title.set_font_weight("bold")
svg.addElement(title)

svg.save("advanced_infographic.svg")

この章では、グラフ、ロゴ、装飾的な要素、テキストなど、これまでに学んだ様々な技術を組み合わせて、一つの複雑なインフォグラフィックを作成しました。このような高度な技術を使うことで、PySVGを使って専門的なグラフィックデザインや数据可視化プロジェクトに取り組むことができます。

以上で、PySVGを使ったSVGグラフィックス作成の詳細なチュートリアルが完了しました。基本から応用まで、段階的に学ぶことで、PySVGの強力な機能を理解し、活用する方法を習得できたと思います。これらの知識を基に、独自のSVGプロジェクトに挑戦してみてください。創造性を発揮し、美しく機能的なグラフィックスを作成する楽しさを体験しましょう。