Gradient Filled Text using svgwrite


This python code example will show you how to use the svgwrite package to draw gradient filled text.

This code creates an SVG image with the text ‘Colorful Text using clip-path’ filled with a colorful gradient using clip-path. The text is displayed in the ‘Arial Bold’ font, with a font size of 36. The SVG image is then saved to ‘17_gradient_text.svg’.

import svgwrite

# Create a new SVG drawing
dwg = svgwrite.Drawing('17_gradient_text.svg', profile='full')

# Define the linear gradient
gradient = dwg.defs.add(dwg.linearGradient(id="gradient"))
gradient.add_stop_color("10%", "#e82164")
gradient.add_stop_color("50%", "#fdc013")
gradient.add_stop_color("90%", "#488fcc")

# Create a text element with Arial Bold font
text = dwg.text("Colorful Text using clip-path", insert=(50, 75), font_size="36", 
                fill="url(#gradient)", font_family="Arial", font_weight="bold")

# Define the clip path
clip_path = dwg.defs.add(dwg.clipPath(id="clip"))

# Add a rectangle that uses the clip path
dwg.add(dwg.rect(insert=(0, 20), size=("100%", "100%"), fill="url(#gradient)", clip_path="url(#clip)"))

# Save the SVG to a file
how to draw text with a gradient fill color with svgwrite

Check out many more svgwrite examples.