Giter Club home page Giter Club logo

python-module-jk-svg's Introduction

jk_svg

Introduction

This python module implements a set of classes for easy programmatic create of SVG graphics.

Information about this module can be found here:

Why this module?

Sometimes it is easier to create SVG graphics (or parts of SVG graphics) programmatically than drawing them by hand. This module assists in this task of creating such SVG graphics as there is no comparable module offering these kind of features.

Limitations of this module

This module currently only supports these kind of shapes:

  • circle
  • ellipse
  • g
  • line
  • polygon
  • polyline
  • rect

Additionally arbitrary elements of any kind can be provided, but those listed above will have a more beautiful API.

How to use this module

Import this module

Please include this module into your application using the following code:

import jk_svg

Create an SVG graphic main node

To be able to create geometry nodes we need to create a SVG graphic object first:

svg = SVGGraphic()

Now we will be able to add arbitrary graphical SVG objects.

How to build SVG graphics

SVG elements form a hierarchical structure. In order to stack SVG elements you therefore require nodes and subnodes that represent graphical shapes. Have a look at this SVG file:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
	xmlns:svg="http://www.w3.org/2000/svg"
	height="297mm"
	width="210mm"
	version="1.1"
	>
	<g>
		<line
			style="opacity:1;fill:none;fill-opacity:1;stroke:#008000;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:5;stroke-dasharray:none;stroke-opacity:1"
			y1="100"
			x2="300"
			x1="100"
			y2="200"
			/>
		<ellipse
			style="opacity:1;fill:none;fill-opacity:1;stroke:#0000c0;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:5;stroke-dasharray:none;stroke-opacity:1"
			cx="250"
			cy="140"
			ry="50"
			rx="75"
			/>
		<polygon
			style="opacity:1;fill:none;fill-opacity:1;stroke:#c00000;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:5;stroke-dasharray:none;stroke-opacity:1"
			points="120,100 200,120 180,200 100,180"
			/>
	</g>
</svg>

This file can be created using the following python code:

with svg.createGroup() as g:

	with g.createLine() as line:
		line.style = STYLE_GREEN
		line.x1 = 100
		line.y1 = 100
		line.x2 = 300
		line.y2 = 200

	with g.createEllipse() as ellipse:
		ellipse.style = STYLE_BLUE
		ellipse.cx = 250
		ellipse.cy = 140
		ellipse.rx = 75
		ellipse.ry = 50

	with g.createPolygon() as poly:
		poly.style = STYLE_RED
		poly.points.append( (20, 0) )
		poly.points.append( (100, 20) )
		poly.points.append( (80, 100) )
		poly.points.append( (0, 80) )
		poly.move(100, 100)

The with statements shown in this example are just a convenience to allow the source code to better reflect the hierarchical structure of the resulting SVG file. In this specific case there are no specific actions involved in entering or leaving this context. So the code shown above is equivalent to the following example:

g = svg.createGroup()

line = g.createLine()
line.style = STYLE_GREEN
line.x1 = 100
line.y1 = 100
line.x2 = 300
line.y2 = 200

ellipse = g.createEllipse()
ellipse.style = STYLE_BLUE
ellipse.cx = 250
ellipse.cy = 140
ellipse.rx = 75
ellipse.ry = 50

poly = g.createPolygon()
poly.style = STYLE_RED
poly.points.append( (20, 0) )
poly.points.append( (100, 20) )
poly.points.append( (80, 100) )
poly.points.append( (0, 80) )
poly.move(100, 100)

The mechanism is always the same: Create a subcomponent that will be a child component to its parent. In this example g is created which is then used to create a line, a anellipse and a polygon subcomponent. While every component is basically the same ans contains an attributes and children member that holds the attributes and children, additional convenience members are provided. Here they are used to specify location, shape and style data. These convenience members depend on the specific shape: Therefore if you use createLine() you will get a slightly different SVG object compared to calling createEllipse() or any other create-method. This aspect assists in working with SVG data as it makes defining geometries very easy.

Contact Information

This work is Open Source. This enables you to use this work for free.

Please have in mind this also enables you to contribute. We, the subspecies of software developers, can create great things. But the more collaborate, the more fantastic these things can become. Therefore Feel free to contact the author(s) listed below, either for giving feedback, providing comments, hints, indicate possible collaborations, ideas, improvements. Or maybe for "only" reporting some bugs:

License

This software is provided under the following license:

  • Apache Software License 2.0

python-module-jk-svg's People

Contributors

jkpubsrc avatar

Stargazers

 avatar

Watchers

 avatar  avatar

Forkers

sunarch

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.