Python to make svg easier for html pages

I like to make some svg files to use it for simple image schemes, rather than use regular images that costs memory and time to load, but they are a bit too annoying to build up (without a graphic program). So I tryed this solution. I started with just lines and text.

# ===================== Svg construction =================
def svg_init(x,y):
	"""Initializing the svg code"""
	return f"<br><svg height='{x}' width='{y}'>"
# ======================= text ===========================
def svg_text(t,clr,x,y):
	""" a text with color, x and y position """
	return f"<text x='{x}' y='{y}' fill='{clr}'>{t}</text>"
# ======================= line ===========================
def svg_line(xy,xy2,c,s):
	""" A line """
	return f"<line x1='{xy[0]}' y1='{xy[1]}' x2='{xy2[0]}' y2='{xy2[1]}' style='stroke:rgb({c[0]},{c[1]},{c[2]});stroke-width:{s}' />"

def svg_end():
	""" Closing the svg html code """
	return "Sorry your browser does not support inline SVG</svg>"
# ========================================================

Whith this code I created a function for the start and end of the svg image. In the start I use the arguments for the height and width. Then I have a function for the text with the text, the color and the coordinates of the text inside the ‘box’ and a function for the line, with a list of the coordinates of the first point (xy), of the second (xy2) and for the color (c). The s is for the stroke width.

def gBEP():
	x = [svg_init(228,500),
	svg_text("€","green",0,15),
	svg_text("q","green",480,220),
	svg_text("RT","green",480,80 ),

	# Ricavi
	svg_line([10,210],[800,0],[0,0,0],2),
	# CT = CF + cvq
	svg_text("CF","red",480,100),
	svg_line([10,100],[500,100],[200,0,0],2),
	svg_line([10,210],[500,210],[0,0,0],2),
	svg_line([10,210],[10,0],[0,0,0],2),
	svg_end()]
	return "".join(x)

In the ecxample above I created a grafic with 3 texts and 4 lines. As you can see, the code is very nite, if you compare it to the code you should need to do the same with svg. Look at it below:

<br><svg height='228' width='500'>
<text x='0' y='15' fill='green'>€</text>
<text x='480' y='220' fill='green'>q</text>
<text x='480' y='80' fill='green'>RT</text>
<line x1='10' y1='210' x2='800' y2='0' style='stroke:rgb(0,0,0);stroke-width:2' />
<text x='480' y='100' fill='red'>CF</text>
<line x1='10' y1='100' x2='500' y2='100' style='stroke:rgb(200,0,0);stroke-width:2' />
<line x1='10' y1='210' x2='500' y2='210' style='stroke:rgb(0,0,0);stroke-width:2' />
<line x1='10' y1='210' x2='10' y2='0' style='stroke:rgb(0,0,0);stroke-width:2' />
Sorry your browser does not support inline SVG</svg>

The result is the same:

An example of possible use of the code

#bep.py
import os
from random import choice


sol = []

def createfile(filename, content):
	"Create a file"
	try:
		with open(filename, "w", encoding="utf-8") as file:
			file.write(content)
		os.system(filename)
	except:
		print("You must use an argument for the filename ('prova.html') and another for the content ('<b>Hello</b> World')")

def generaEsercizio(num):
	global pc
	CF = """
100.000
120.000
160.000
80.000
60.000
""".splitlines()[1:]
	CF= [x.replace(".","") for x in CF]
	CF= [int(x) for x in CF]
	# prezzo e costi variabili
	pc = [5,6,8,9,10,12]
	p = [2,3,4,6,9]

	CF = choice(CF)
	cv = choice(pc)
	p = cv + choice(p)
	dati = [CF,cv,p]
	testo = "Abbiamo costi fissi per {}, costi variabili per {} e un prezzo pari a {}. Calcola la quantità di prodotti da vendere (q) che rende consente di recuperare tutti i costi. Disegna il diagramma di redditività".format(*dati)
	sol.append("(" + str(num) + " " + str(int(int(dati[0])/(dati[2]-dati[1]))) + ") ")
	return testo

# ===================== Svg construction =================
def svg_init(x,y):
	"""Initializing the svg code"""
	return f"<br><svg height='{x}' width='{y}'>"
# ======================= text ===========================
def svg_text(t,clr,x,y):
	""" a text with color, x and y position """
	return f"<text x='{x}' y='{y}' fill='{clr}'>{t}</text>"
# ======================= line ===========================
def svg_line(xy,xy2,c,s):
	""" A line """
	return f"<line x1='{xy[0]}' y1='{xy[1]}' x2='{xy2[0]}' y2='{xy2[1]}' style='stroke:rgb({c[0]},{c[1]},{c[2]});stroke-width:{s}' />"

def svg_end():
	""" Closing the svg html code """
	return "Sorry your browser does not support inline SVG</svg>"
# ========================================================

def pagebreak():
	return "<div style='page-break-after:always'></div>"

def gBEP():
	x = [svg_init(228,500),
	svg_text("€","green",0,15),
	svg_text("q","green",480,220),
	svg_text("RT","green",480,80 ),

	# Ricavi
	svg_line([10,210],[800,0],[0,0,0],2),
	# CT = CF + cvq
	svg_text("CF","red",480,100),
	svg_line([10,100],[500,100],[200,0,0],2),
	svg_line([10,210],[500,210],[0,0,0],2),
	svg_line([10,210],[10,0],[0,0,0],2),
	svg_end()]
	return "".join(x)

html = ""
def single():
	global html
	global sol
	for n in range(5):
		html += str(n+1) + " " + generaEsercizio(n+1)
		html += "<br><br>"
	html += " - ".join(sol)
	sol = []
	html += gBEP();
	html += gBEP();
	html += pagebreak()

for i in range(15):
	single()

createfile("es1.html", html)

This is a part of the output:

1 Abbiamo costi fissi per 60000, costi variabili per 6 e un prezzo pari a 8. Calcola la quantità di prodotti da vendere (q) che rende consente di recuperare tutti i costi. Disegna il diagramma di redditività

2 Abbiamo costi fissi per 100000, costi variabili per 10 e un prezzo pari a 13. Calcola la quantità di prodotti da vendere (q) che rende consente di recuperare tutti i costi. Disegna il diagramma di redditività

3 Abbiamo costi fissi per 160000, costi variabili per 10 e un prezzo pari a 12. Calcola la quantità di prodotti da vendere (q) che rende consente di recuperare tutti i costi. Disegna il diagramma di redditività

4 Abbiamo costi fissi per 120000, costi variabili per 5 e un prezzo pari a 11. Calcola la quantità di prodotti da vendere (q) che rende consente di recuperare tutti i costi. Disegna il diagramma di redditività

5 Abbiamo costi fissi per 80000, costi variabili per 6 e un prezzo pari a 9. Calcola la quantità di prodotti da vendere (q) che rende consente di recuperare tutti i costi. Disegna il diagramma di redditività

(1 30000) - (2 33333) - (3 80000) - (4 20000) - (5 26666)

Utilities

Published by pythonprogramming

Started with basic on the spectrum, loved javascript in the 90ies and python in the 2000, now I am back with python, still making some javascript stuff when needed. View more posts