tessl/pypi-dominate

A Python library for creating and manipulating HTML documents using an elegant DOM API

—

Pending

Overview

Eval results

Files

SVG Graphics

Name: tessl/pypi-dominate
Author: tessl

SVG elements for vector graphics creation with automatic attribute name conversion (underscore to dash) and support for shapes, paths, gradients, filters, and animations.

Capabilities

Base SVG Tag Class

Foundation class for all SVG elements with automatic attribute name conversion for SVG-specific naming conventions.

class svg_tag(html_tag):
    @staticmethod
    def clean_attribute(attribute):
        """
        Convert Python attribute names to SVG attribute names.
        Converts underscore-separated names to dash-separated for SVG attributes.
        
        Parameters:
        - attribute (str): Python attribute name
        
        Returns:
        - str: SVG-compatible attribute name
        """

Usage Example

from dominate.svg import *

# Attributes with underscores become dashes
circle_element = circle(stroke_width='2', fill_opacity='0.5')
# Renders as: <circle stroke-width="2" fill-opacity="0.5"></circle>

Core SVG Elements

Root SVG container and basic grouping elements.

def svg(*args, **kwargs): ...     # Root SVG element
def g(*args, **kwargs): ...       # Grouping element
def defs(*args, **kwargs): ...    # Definitions container
def use(*args, **kwargs): ...     # Element reuse
def symbol(*args, **kwargs): ... # Reusable graphics symbol
def switch(*args, **kwargs): ...  # Conditional rendering
def view(*args, **kwargs): ...    # View definition

Usage Example

# Basic SVG structure
svg_graphic = svg(
    defs(
        # Define reusable elements
        symbol(
            circle(r='10', fill='red'),
            id='red-dot'
        )
    ),
    g(
        # Group related elements
        use(href='#red-dot', x='10', y='10'),
        use(href='#red-dot', x='30', y='30'),
        transform='scale(2)'
    ),
    viewBox='0 0 100 100',
    width='200',
    height='200'
)

Basic Shapes

Fundamental SVG shape elements for creating geometric graphics.

def circle(*args, **kwargs): ...   # Circle shape
def ellipse(*args, **kwargs): ...  # Ellipse shape
def rect(*args, **kwargs): ...     # Rectangle shape
def line(*args, **kwargs): ...     # Line shape
def polygon(*args, **kwargs): ...  # Polygon shape
def polyline(*args, **kwargs): ... # Polyline shape
def path(*args, **kwargs): ...     # Complex path shape

Usage Example

# Basic shapes
shapes = svg(
    # Circle
    circle(cx='50', cy='50', r='20', fill='blue', stroke='black', stroke_width='2'),
    
    # Rectangle
    rect(x='10', y='80', width='40', height='20', fill='green', rx='5'),
    
    # Ellipse
    ellipse(cx='120', cy='50', rx='30', ry='15', fill='yellow'),
    
    # Line
    line(x1='0', y1='0', x2='100', y2='100', stroke='red', stroke_width='3'),
    
    # Polygon
    polygon(points='150,10 180,40 150,70 120,40', fill='purple'),
    
    # Complex path
    path(d='M 200,50 Q 220,10 240,50 T 280,50', stroke='orange', fill='none'),
    
    viewBox='0 0 300 150'
)

Text Elements

SVG text rendering with path-following capabilities.

def text(*args, **kwargs): ...     # Text content
def textPath(*args, **kwargs): ... # Text following a path
def tspan(*args, **kwargs): ...    # Text span within text
def title(*args, **kwargs): ...    # Accessible title
def desc(*args, **kwargs): ...     # Accessible description

Usage Example

# SVG text
text_graphic = svg(
    defs(
        path(d='M 10,50 Q 50,10 90,50', id='text-path')
    ),
    text(
        'Hello SVG World!',
        x='10', y='30',
        font_family='Arial',
        font_size='16',
        fill='blue'
    ),
    text(
        textPath(
            'Text following a curved path',
            href='#text-path'
        ),
        font_size='12'
    ),
    text(
        'Multi-span text with ',
        tspan('different', fill='red', font_weight='bold'),
        tspan(' styles', fill='green', font_style='italic'),
        x='10', y='80'
    ),
    title('SVG Text Example'),
    desc('Demonstrates various SVG text capabilities'),
    viewBox='0 0 200 100'
)

Gradients and Patterns

Fill and stroke definitions for advanced styling.

def linearGradient(*args, **kwargs): ... # Linear gradient
def radialGradient(*args, **kwargs): ... # Radial gradient
def pattern(*args, **kwargs): ...        # Pattern definition
def stop(*args, **kwargs): ...           # Gradient color stop

Usage Example

# Gradients and patterns
styled_graphics = svg(
    defs(
        # Linear gradient
        linearGradient(
            stop(offset='0%', stop_color='red'),
            stop(offset='50%', stop_color='yellow'),
            stop(offset='100%', stop_color='blue'),
            id='linear-grad',
            x1='0%', y1='0%', x2='100%', y2='0%'
        ),
        
        # Radial gradient
        radialGradient(
            stop(offset='0%', stop_color='white'),
            stop(offset='100%', stop_color='black'),
            id='radial-grad',
            cx='50%', cy='50%', r='50%'
        ),
        
        # Pattern
        pattern(
            rect(width='10', height='10', fill='lightblue'),
            circle(cx='5', cy='5', r='3', fill='darkblue'),
            id='dot-pattern',
            patternUnits='userSpaceOnUse',
            width='10', height='10'
        )
    ),
    
    # Use gradients and patterns
    rect(x='10', y='10', width='60', height='40', fill='url(#linear-grad)'),
    circle(cx='120', cy='30', r='25', fill='url(#radial-grad)'),
    rect(x='160', y='10', width='60', height='40', fill='url(#dot-pattern)'),
    
    viewBox='0 0 240 60'
)

Clipping and Masking

Advanced graphics manipulation for complex visual effects.

def clipPath(*args, **kwargs): ... # Clipping path definition
def mask(*args, **kwargs): ...     # Masking definition

Usage Example

# Clipping and masking
clipped_graphics = svg(
    defs(
        # Clipping path
        clipPath(
            circle(cx='50', cy='50', r='40'),
            id='circle-clip'
        ),
        
        # Mask
        mask(
            rect(width='100', height='100', fill='white'),
            circle(cx='50', cy='50', r='20', fill='black'),
            id='hole-mask'
        )
    ),
    
    # Apply clipping
    g(
        rect(x='0', y='0', width='100', height='100', fill='red'),
        clip_path='url(#circle-clip)'
    ),
    
    # Apply masking
    g(
        rect(x='110', y='0', width='100', height='100', fill='blue'),
        mask='url(#hole-mask)'
    ),
    
    viewBox='0 0 220 110'
)

Markers

Arrowheads and decorative markers for paths and lines.

def marker(*args, **kwargs): ... # Marker definition

Usage Example

# Markers
marked_lines = svg(
    defs(
        marker(
            path(d='M 0,0 L 10,5 L 0,10 z', fill='red'),
            id='arrowhead',
            markerWidth='10',
            markerHeight='10',
            refX='10',
            refY='5',
            orient='auto'
        )
    ),
    
    line(
        x1='10', y1='10', x2='90', y2='50',
        stroke='black',
        stroke_width='2',
        marker_end='url(#arrowhead)'
    ),
    
    viewBox='0 0 100 60'
)

Animation Elements

SVG animation capabilities for dynamic graphics.

def animate(*args, **kwargs): ...          # Attribute animation
def animateMotion(*args, **kwargs): ...    # Motion animation
def animateTransform(*args, **kwargs): ... # Transform animation (self-closing)
def mpath(*args, **kwargs): ...            # Motion path reference

Usage Example

# Animated SVG
animated_graphics = svg(
    circle(
        cx='50', cy='50', r='20', fill='blue',
        animate(
            attributeName='r',
            values='20;30;20',
            dur='2s',
            repeatCount='indefinite'
        )
    ),
    
    rect(
        x='100', y='40', width='20', height='20', fill='red',
        animateTransform(
            attributeName='transform',
            type='rotate',
            values='0 110 50;360 110 50',
            dur='3s',
            repeatCount='indefinite'
        )
    ),
    
    circle(
        cx='0', cy='0', r='5', fill='green',
        animateMotion(
            dur='4s',
            repeatCount='indefinite',
            mpath(href='#motion-path')
        )
    ),
    
    # Hidden path for motion
    defs(
        path(d='M 200,50 Q 250,20 300,50 Q 250,80 200,50', id='motion-path')
    ),
    
    viewBox='0 0 350 100'
)

Filter Effects

Advanced visual effects and filters for graphics enhancement.

def filter(*args, **kwargs): ...             # Filter container

# Filter primitives
def feBlend(*args, **kwargs): ...            # Blending
def feColorMatrix(*args, **kwargs): ...      # Color transformation
def feComponentTransfer(*args, **kwargs): ... # Component transfer
def feComposite(*args, **kwargs): ...        # Compositing
def feConvolveMatrix(*args, **kwargs): ...   # Convolution
def feDiffuseLighting(*args, **kwargs): ...  # Diffuse lighting
def feDisplacementMap(*args, **kwargs): ...  # Displacement mapping
def feFlood(*args, **kwargs): ...            # Flood fill
def feGaussianBlur(*args, **kwargs): ...     # Gaussian blur
def feImage(*args, **kwargs): ...            # Image source
def feMerge(*args, **kwargs): ...            # Merge multiple inputs
def feMorphology(*args, **kwargs): ...       # Morphological operations
def feOffset(*args, **kwargs): ...           # Offset
def feSpecularLighting(*args, **kwargs): ... # Specular lighting
def feTile(*args, **kwargs): ...             # Tiling
def feTurbulence(*args, **kwargs): ...       # Turbulence generation

# Lighting sources
def feDistantLight(*args, **kwargs): ...     # Distant light source
def fePointLight(*args, **kwargs): ...       # Point light source
def feSpotLight(*args, **kwargs): ...        # Spot light source

Usage Example

# Filter effects
filtered_graphics = svg(
    defs(
        filter(
            feGaussianBlur(stdDeviation='3', in_='SourceGraphic'),
            id='blur-filter'
        ),
        
        filter(
            feOffset(dx='3', dy='3', in_='SourceGraphic', result='offset'),
            feGaussianBlur(stdDeviation='2', in_='offset', result='shadow'),
            feFlood(flood_color='black', flood_opacity='0.3', result='flood'),
            feComposite(in_='flood', in2='shadow', operator='in', result='shadow'),
            feMerge(
                feMergeNode(in_='shadow'),
                feMergeNode(in_='SourceGraphic')
            ),
            id='drop-shadow'
        )
    ),
    
    # Apply filters
    rect(x='10', y='10', width='80', height='40', fill='blue', filter='url(#blur-filter)'),
    text('Drop Shadow', x='120', y='35', font_size='16', filter='url(#drop-shadow)'),
    
    viewBox='0 0 250 60'
)

Complete SVG Example

from dominate.svg import *

# Complete SVG graphic with multiple features
complete_svg = svg(
    # Definitions
    defs(
        # Gradient
        linearGradient(
            stop(offset='0%', stop_color='#ff6b6b'),
            stop(offset='100%', stop_color='#4ecdc4'),
            id='main-gradient',
            x1='0%', y1='0%', x2='100%', y2='100%'
        ),
        
        # Pattern
        pattern(
            rect(width='20', height='20', fill='#f0f0f0'),
            circle(cx='10', cy='10', r='5', fill='#333'),
            id='dot-bg',
            patternUnits='userSpaceOnUse',
            width='20', height='20'
        ),
        
        # Filter
        filter(
            feGaussianBlur(stdDeviation='2'),
            id='soft-glow'
        )
    ),
    
    # Background
    rect(x='0', y='0', width='100%', height='100%', fill='url(#dot-bg)'),
    
    # Main graphics
    g(
        circle(
            cx='150', cy='100', r='60',
            fill='url(#main-gradient)',
            stroke='white',
            stroke_width='4',
            filter='url(#soft-glow)'
        ),
        
        text(
            'SVG Graphics',
            x='150', y='110',
            text_anchor='middle',
            font_family='Arial, sans-serif',
            font_size='16',
            font_weight='bold',
            fill='white'
        ),
        
        # Animated element
        rect(
            x='100', y='200', width='100', height='20',
            fill='#ff6b6b',
            animateTransform(
                attributeName='transform',
                type='scale',
                values='1;1.1;1',
                dur='2s',
                repeatCount='indefinite'
            )
        )
    ),
    
    # Metadata
    title('Complete SVG Example'),
    desc('Demonstrates gradients, patterns, filters, and animation'),
    
    # SVG attributes
    viewBox='0 0 300 250',
    width='600',
    height='500',
    xmlns='http://www.w3.org/2000/svg'
)

Install with Tessl CLI