Skip to main content

Svg-edit

The best way to use graphic with the computer is... well, there isn't best way, it depends by the way you have to use the images. For sure one of the most interesting kind of image format is the svg, if you are a programmer, because:
- it is vectorial (so you don't lose quality changing its size);
- you can change it's parameters with code (for interactivity).

 I think it is very useful to use them for a lot of purposes, while for other purposes you will use other formats like jpg or png, gif, etc.

SVG EDIT


If you want a free resource to edit svgs you can go in this repository:

 <a href="https://github.com/SVG-Edit/svgedit">svg-edit github repository</a>

 and click on this link to access to the app:

 < href="https://svg-edit.github.io/svgedit/releases/svg-edit-2.8.1/svg-editor.html">Svg-edit app</a>

 When you draw something in this app, it will stay in the memory of the pc, so that if you close it, you will find the drawing there were you left it.

 This is an example of an image made with svg-edit
If you click on the <svg> botton in the menu at the top, you will see this 'code':

 <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->

  <g>
  <title>Layer 1</title>
  <text fill="#ff0000" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="74.455456" y="104.133501" id="svg_12" font-size="24" font-family="serif" text-anchor="middle" xml:space="preserve" transform="matrix(1.2196167707443237,0,0,1.380281686782837,-29.867880821228027,-29.875880017876625) " stroke="#000000">attivo</text>
  <text fill="#ff0000" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="241.305319" y="111.093513" id="svg_14" font-size="24" font-family="serif" text-anchor="middle" xml:space="preserve" transform="matrix(1.1532939901359924,0,0,1.361391893160075,-30.37017379168528,-35.53642536117171) " stroke="#000000">passivo</text>
  <text fill="#ff0000" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="116.056655" y="201.593797" id="svg_18" font-size="24" font-family="serif" text-anchor="middle" xml:space="preserve" transform="matrix(1.2172960173074898,0,0,1.5011768258991438,-75.227628426464,-126.06311181223504) " stroke="#000000">immob.</text>
  <text fill="#ff0000" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="229.689033" y="298.344911" id="svg_19" font-size="24" font-family="serif" text-anchor="middle" xml:space="preserve" transform="matrix(1.1835614098536238,0,0,1.628800313944268,-194.0826923957001,-236.28453109207788) " stroke="#000000">attivo circ.</text>
  <text fill="#ff0000" stroke="#000000" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="251.937523" y="168.312498" id="svg_20" font-size="24" font-family="serif" text-anchor="middle" xml:space="preserve">passivo</text>
  <text fill="#ff0000" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="377.985205" y="266.763339" id="svg_21" font-size="24" font-family="serif" text-anchor="middle" xml:space="preserve" transform="matrix(0.8162409118485314,0,0,1.662297271750191,-64.86242061787641,-193.40282670908192) " stroke="#000000">patrimonio netto</text>
  <text fill="#0000ff" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="309.395856" y="110.812496" id="svg_22" font-size="24" font-family="serif" text-anchor="middle" xml:space="preserve" transform="matrix(1.3007132620764565,0,0,1.7584822888358074,-236.79021665263792,-143.1362768423146) " stroke="#000000">Situazione patrimoniale</text>
  <rect stroke="#000000" fill="none" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="2.119817" y="2.333326" width="328.708343" height="71.375001" id="svg_36"/>
  <rect stroke="#201ca5" fill="#7db8f2" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="2.371717" y="280.846565" width="159.469927" height="38.375002" id="svg_42"/>
  <rect id="svg_1" stroke="#f46e6e" fill="#ffaaaa" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="166.707498" y="280.698269" width="163.458337" height="38.375002"/>
  <text stroke="#000000" transform="matrix(0.6006386876106262,0,0,0.6611878275871277,240.16590923815966,32.721844338811934) " xml:space="preserve" text-anchor="middle" font-family="Fantasy" font-size="24" id="svg_9" y="83.462042" x="412.562777" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" fill="#000000">Analisi della situazione patrimoniale</text>
  <text transform="rotate(-0.3881179392337799 439.5781860351499,197.73941040038983) " opacity="0.5" xml:space="preserve" text-anchor="middle" font-family="serif" font-size="24" id="svg_24" y="205.793466" x="439.474441" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke="#cc0000" fill="#4c4caa">Capitalizzata</text>
  <rect stroke="#000000" id="svg_27" fill="none" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="2.61651" y="213.922722" width="159.337473" height="61.937908"/>
  <rect stroke="#000000" id="svg_28" fill="none" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="2.616506" y="134.452522" width="159.33749" height="77.335259"/>
  <rect stroke="#000000" id="svg_29" fill="none" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="2.616506" y="76.339937" width="159.33749" height="57.46771"/>
  <rect stroke="#000000" id="svg_30" fill="none" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="165.74151" y="193.922728" width="159.337473" height="82.562903"/>
  <rect stroke="#000000" id="svg_31" fill="none" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="165.663381" y="136.95252" width="159.33749" height="54.835259"/>
  <rect id="svg_32" stroke="#000000" fill="none" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="165.741506" y="76.339937" width="159.33749" height="57.46771"/>
  <text id="svg_33" opacity="0.5" xml:space="preserve" text-anchor="middle" font-family="serif" font-size="24" y="185.051056" x="403.443766" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke="#cc0000" fill="#4c4caa">Azienda</text>
  <path stroke="#3a0404" transform="rotate(58.36266326904297 342.4336547851563,218.17771911621097) " id="svg_38" d="m323.054326,218.247543l19.379336,29.021028l19.379336,-29.021028l-9.689669,0l0,-29.160672l-19.379335,0l0,29.160672l-9.689669,0z" opacity="0.82" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" fill="#ff0000"/>
 </g>

</svg>

 that in the browser (or in another program) it will be shown like this:

Another program (free) that you can use is Inkscape.

Comments

Post a Comment

Popular posts from this blog

Widgets for Jupyter Notebook: a text input widget

Widgets for Jupyter notebook ¶ Let's import the module ipywidgets into the Jupyter Notebook from ipywidgets import widgets from ipywidgets import * from traitlets import * Now we import the display function from IPython ¶ let's attach a function to the event on_submit After we run this cell, we can go up and write something in the text widget and after you submit the text you wrote will be printed after the cell from IPython.display import display text = widgets . Text () display ( text ) def handle_submit ( sender ): print ( "Thank you for entering this text:" , text . value ) text . on_submit ( handle_submit ) Thank you for entering this text: Ciao
4 comments
Read more

Image in Jupyter and PIL step by step

Hi, """ Hi, we will see a step by step tutorial about PIL and IPython.core.display modules to create images from other images and diplaying them in Jupyter notebook """ # What we will do # Create a card # 1. Take a pic of a heart # 2. Create an image blanck the size of a card 90*130 # 3. Paste the heart in the middle # 4. show the card """ As first step wi will simply display an image on the notebook. I will show two way to display the image with 'display' from IPhyton a. Using the open method of PIL.Image (named Img) b. Using the Image method from the IPython.core.display module """ # 1. Take the pic of a heart from IPython.core.display import Image , display from PIL import Image as Img heart = 'img/heart.png' display ( Image ( heart )) display ( Img . open ( heart )) # 2. Create an image blanck the size of a card 90*130 # 3. Paste the heart in the middle #...
Post a Comment
Read more

Let's draw a circle with PIL in Python

Let's continue making our coding around PIL. Let's start with some basic drawing: a circle from PIL import Image , ImageDraw img = Image . new ( "RGB" ,( 60 , 60 ), 'white' ) dr = ImageDraw . Draw ( img ) dr . ellipse (( 0 , 0 , 60 , 60 ), 'yellow' ) img . show () this is the image produced *If you use jupyter notebook, just write img at the end to see the output.
Post a Comment
Read more