Editing SVG file - path tools

Post questions on how to use or achieve an effect in Inkscape.
Michilangelo
Posts: 1
Joined: Mon Feb 26, 2018 11:34 pm

Editing SVG file - path tools

Postby Michilangelo » Mon Feb 26, 2018 11:42 pm

Hey.

I am new to Inkscape. I am trying to edit the colors of an SVG file, and having some trouble.

I want to change the color of the different sections of the image. I have been trying to use the paths tool to change the paths so that I can separate the different parts of the image, and color them as I want. I want the circle, and the different continents to be separate, so I can color them in different colors.
* What is the best way to do this?
*How do you reselect previous selected nodes? If am selecting several nodes, and then click wrong, the selection disappears, and i have to reselect everything again. Going back doesn't work.

I have tried making an additional path to separate the ring from the right continent, then select the path and the nodes around a continent. Then I've tried to duplicate the selection and separating it, but I just end up deselecting it.

Hope someone can help me, I am tearing my hair out at this point! :shock:
Attachments
earth.svg
(6.87 KiB) Downloaded 216 times

tylerdurden
Posts: 2344
Joined: Sun Apr 14, 2013 12:04 pm
Location: Michigan, USA

Re: Editing SVG file - path tools

Postby tylerdurden » Tue Feb 27, 2018 9:20 am

Personally, I'd first make a copy of the whole thing for each separate element, then put each on a layer and change their color.

Then I'd hide all but the layer I'm working on and delete all the nodes I don't need from each one.

TD
Have a nice day.

I'm using Inkscape 0.92.2 (5c3e80d, 2017-08-06), 64 bit win8.1

The Inkscape manual has lots of helpful info! http://tavmjong.free.fr/INKSCAPE/MANUAL/html/

User avatar
brynn
Posts: 10309
Joined: Wed Sep 26, 2007 4:34 pm
Location: western USA
Contact:

Re: Editing SVG file - path tools

Postby brynn » Wed Feb 28, 2018 2:08 pm

In this case, I would make a new circle, which is exactly the size of the inner path of the existing circle. Align it so that it's right on top of the inner edge of the original circle. With circle selected, do Path menu > Object to Path.

Then select both the circle and the main path of this object, and do Path menu > Division. That seems to break up everything into the pieces that you need.

You have to be very careful with the size and position of the new circle, or else you'll end up with a lot of tiny slivers of the circle. Maybe better to make the new circle actually just a tiny bit smaller than the original circle.

User avatar
shawnhcorey
Posts: 149
Joined: Mon Jan 07, 2008 12:17 pm

Re: Editing SVG file - path tools

Postby shawnhcorey » Thu Mar 01, 2018 12:35 am

For each part I want to change, I would use Edit -> Duplicate, Ctrl-D, to create a copy in-place and remove the nodes that do not belong to the part. Then I would tweak the part to the correct shape and colour it. This way, in case I mess up, I only have redo the last part; the original remains unchanged. When everything is done, I can remove the original.

SUMATORIO
Posts: 33
Joined: Sat Jun 22, 2013 12:51 am

Re: Editing SVG file - path tools

Postby SUMATORIO » Wed Mar 14, 2018 9:23 pm

Michilangelo wrote:Hey.

I am new to Inkscape. I am trying to edit the colors of an SVG file, and having some trouble.

I want to change the color of the different sections of the image. I have been trying to use the paths tool to change the paths so that I can separate the different parts of the image, and color them as I want. I want the circle, and the different continents to be separate, so I can color them in different colors.
* What is the best way to do this?
*How do you reselect previous selected nodes? If am selecting several nodes, and then click wrong, the selection disappears, and i have to reselect everything again. Going back doesn't work.

I have tried making an additional path to separate the ring from the right continent, then select the path and the nodes around a continent. Then I've tried to duplicate the selection and separating it, but I just end up deselecting it.

Hope someone can help me, I am tearing my hair out at this point! :shock:


Michelangelo:

El archivo svg que tienes es un objeto cerrado y por tanto al dar un color se llena el único recinto con ese color.

Si quieres poner colores distintos, tiene que tener objetos distintos. ¿Cómo puedes hacer objetos distintos? Pues dividiendo el único objeto que tienes, en partes.

Para ello duplicas el objeto, para tener una copia, y haces la líneas necesarias para dividir en las partes que quieras. Elige un ancho de línea pequeño para precisar mejor los límites. Con el editor de nodos, ajustas la línea al recinto que deseas. Por ejemplo si quieres dividir el continente americano en tres partes América del Norte, América Central y América del Sur tendrás que hacer tres trayectos que contengan esas regiones. Ver las imágenes adjuntas. Para América Central hago una sola línea ya que en la parte superior la va a dividir la línea de América del Norte.

Esos trayectos los combinas (CTRL +K) y seleccionando el mapa mundi que has duplicado -> Trayecto> División. Te ha creado tres objetos separados y el resto.
A los objetos individuales les puede dar color. Así con el resto del mapamundi con las regiones que quieras dividir.

Espero que esto responda a tu problema.

Saludos
Fernando.

DIVIDIR_TRAYECTO.svg-path10-920.png
DIVIDIR_TRAYECTO.svg-path10-920.png (176.28 KiB) Viewed 1799 times

DIVIDIR_TRAYECTO.svg-path209-656.png
DIVIDIR_TRAYECTO.svg-path209-656.png (120.63 KiB) Viewed 1799 times

SUMATORIO
Posts: 33
Joined: Sat Jun 22, 2013 12:51 am

Re: Editing SVG file - path tools

Postby SUMATORIO » Wed Mar 14, 2018 9:29 pm

Michelangelo:

El archivo svg que tienes es un objeto cerrado y por tanto al dar un color se llena el único recinto con ese color.

Si quieres poner colores distintos, tiene que tener objetos distintos. ¿Cómo puedes hacer objetos distintos? Pues dividiendo el único objeto que tienes, en partes.
Para ello duplicas el objeto, para tener una copia, y haces la líneas necesarias para dividir en las partes que quieras. Por ejemplo si quieres dividir el continente americano en tres partes América del Norte, América Central y América del Sur tendrás que hacer tres trayectos que contengan esas regiones. Esos trayectos los combinas (CTRL +K) y seleccionando el mapa mundi que has duplicado -> Trayecto> División. Te ha creado tres objetos separados y el resto.
A los objetos individuales les puede dar color. Así con el resto del mapamundi con las regiones que quieras dividir.

Saludos

Fernando

DIVIDIR_TRAYECTO.svg-path10-920.jpg
DIVIDIR_TRAYECTO.svg-path10-920.jpg (187.79 KiB) Viewed 1798 times

DIVIDIR_TRAYECTO.svg-path209-656.jpg
DIVIDIR_TRAYECTO.svg-path209-656.jpg (167.97 KiB) Viewed 1798 times

User avatar
Xav
Posts: 1209
Joined: Fri May 08, 2009 1:18 am
Location: UK
Contact:

Re: Editing SVG file - path tools

Postby Xav » Thu Mar 15, 2018 1:20 am

Fernando, thanks for posting your reply to this thread. I would like to point out that this is an English language forum, and although we're quite happy to accept non-English responses, it would also be useful if you could include an English translation (even one from Google), so that other readers can get an understanding of your solution.

Google Translate wrote:Fernando, gracias por publicar tu respuesta a este hilo. Me gustaría señalar que este es un foro de idioma inglés, y aunque estamos muy contentos de aceptar respuestas que no estén en inglés, también sería útil si pudiera incluir una traducción al inglés (incluso una de Google), de modo que otras los lectores pueden comprender su solución.



Here's a Google translation of Fernando's original post:

Google Translate wrote:The svg file that you have is a closed object and therefore when you give a color, the only enclosure with that color is filled.

If you want to put different colors, you have to have different objects. How can you make different objects? So dividing the only object you have, in parts.

To do this you duplicate the object, to have a copy, and make the necessary lines to divide into the parts you want. Choose a small line width to better define the limits. With the node editor, you adjust the line to the room you want. For example if you want to divide the American continent into three parts North America, Central America and South America you will have to make three trips that contain those regions. See the attached images. For Central America, I make a single line because the North American line is going to be divided in the upper part.

These paths are combined (CTRL + K) and selecting the world map you have duplicated -> Journey> Division. He has created three separate objects for you and the rest.
Individual objects can be colored. So with the rest of the world map with the regions that you want to divide.

I hope this answers your problem.
Co-creator of The Greys and Monsters, Inked - Inkscape drawn webcomics
Web SiteFacebookTwitter


Return to “Help with using Inkscape”