Editing an SVG file
Discussion
Is there anyone on here proficient in this sort of witchcraft, that could advise how to easily edit an SVG file, in terms of simple cut/copy/paste as you would a normal jpg image as you would be able to do in something as basic as MS paint 
?
It's a couple of very simple sold black/white logos, in svg format, and I just need to rearrange the order of the letters in the logo - like for one of them, ABBX would now be BBAX.
Simple enough you'd think...but I downloaded inkscape (mac), tried multiple times and got absolutely nowhere.
Despite having lots of brain cells and pieces of paper allegedly stating as such, it just isn't a language I understand.
I can do and did do it easily enough from a low quality jpeg as a test, but then the resolution is predictably crap both as an original source file and for printing for the intended purposes.
Thanks
?It's a couple of very simple sold black/white logos, in svg format, and I just need to rearrange the order of the letters in the logo - like for one of them, ABBX would now be BBAX.
Simple enough you'd think...but I downloaded inkscape (mac), tried multiple times and got absolutely nowhere.
Despite having lots of brain cells and pieces of paper allegedly stating as such, it just isn't a language I understand.
I can do and did do it easily enough from a low quality jpeg as a test, but then the resolution is predictably crap both as an original source file and for printing for the intended purposes.
Thanks
i'm no expert but I don't think paint is going to cut it as far as editing an SVG. A program like illustrator will be needed.
There are free SVG editors and even online ones you could try https://mediamodifier.com/free-svg-editor
There are free SVG editors and even online ones you could try https://mediamodifier.com/free-svg-editor
Inkscape is an SVG/vector editor, so should work, but it will depend on how the SVG has been made in the first place and whether the text is a single element or individual elements.
If the former, you'd have to ungroup or split the element into individual letters.
However, it might be that the letters have been made as a cut-out from the background, so that there are no letters as such to edit.
I'm happy to put it into Illustrator to check it out if you're happy to share it here.
If the former, you'd have to ungroup or split the element into individual letters.
However, it might be that the letters have been made as a cut-out from the background, so that there are no letters as such to edit.
I'm happy to put it into Illustrator to check it out if you're happy to share it here.
Edited by mmm-five on Wednesday 13th July 20:10
SVGs are basically text files so you can open them in any text editor. Even Notepad will do it. If you understand XML you'll be able to follow an SVG's code.
Unfortunately, chances are it's been generated by a design app though so it could well be an incomprehensible mess but it's probably worth a look. If it looks reasonably tidy then you might be able to edit the code.
What you will need to do is identify the element that corresponds to the bit you want to move. Most likely it'll be a <path>.
To identify the right path, first make a back up of the file. Next, drop the file into a web browser and you should see the image.
Open up the same file in a text editor and look for an opening tag <path> and its closing tag </path>. Delete them both and everything in between. Now, refresh the browser and something will have disappeared. Eventually you should be able to identify the bits you need. This is making the assumption that each part of the image exists as a separate element, and that's not always the case.
If you can find it, it's likely to have either x and y attributes, and/or a transform attribute on it with a value that looks something like translate(100, -50) . Those are saying to move the element along the x and y axis by those units. Change the numbers as required until you get what you need.
Err, good luck.
Unfortunately, chances are it's been generated by a design app though so it could well be an incomprehensible mess but it's probably worth a look. If it looks reasonably tidy then you might be able to edit the code.
What you will need to do is identify the element that corresponds to the bit you want to move. Most likely it'll be a <path>.
To identify the right path, first make a back up of the file. Next, drop the file into a web browser and you should see the image.
Open up the same file in a text editor and look for an opening tag <path> and its closing tag </path>. Delete them both and everything in between. Now, refresh the browser and something will have disappeared. Eventually you should be able to identify the bits you need. This is making the assumption that each part of the image exists as a separate element, and that's not always the case.
If you can find it, it's likely to have either x and y attributes, and/or a transform attribute on it with a value that looks something like translate(100, -50) . Those are saying to move the element along the x and y axis by those units. Change the numbers as required until you get what you need.
Err, good luck.
durbster said:
SVGs are basically text files so you can open them in any text editor. Even Notepad will do it. If you understand XML you'll be able to follow an SVG's code.
Unfortunately, chances are it's been generated by a design app though so it could well be an incomprehensible mess but it's probably worth a look. If it looks reasonably tidy then you might be able to edit the code.
What you will need to do is identify the element that corresponds to the bit you want to move. Most likely it'll be a <path>.
To identify the right path, first make a back up of the file. Next, drop the file into a web browser and you should see the image.
Open up the same file in a text editor and look for an opening tag <path> and its closing tag </path>. Delete them both and everything in between. Now, refresh the browser and something will have disappeared. Eventually you should be able to identify the bits you need. This is making the assumption that each part of the image exists as a separate element, and that's not always the case.
If you can find it, it's likely to have either x and y attributes, and/or a transform attribute on it with a value that looks something like translate(100, -50) . Those are saying to move the element along the x and y axis by those units. Change the numbers as required until you get what you need.
Err, good luck.
Thanks....that actually made sense, and I had no idea you could do that. Unfortunately, chances are it's been generated by a design app though so it could well be an incomprehensible mess but it's probably worth a look. If it looks reasonably tidy then you might be able to edit the code.
What you will need to do is identify the element that corresponds to the bit you want to move. Most likely it'll be a <path>.
To identify the right path, first make a back up of the file. Next, drop the file into a web browser and you should see the image.
Open up the same file in a text editor and look for an opening tag <path> and its closing tag </path>. Delete them both and everything in between. Now, refresh the browser and something will have disappeared. Eventually you should be able to identify the bits you need. This is making the assumption that each part of the image exists as a separate element, and that's not always the case.
If you can find it, it's likely to have either x and y attributes, and/or a transform attribute on it with a value that looks something like translate(100, -50) . Those are saying to move the element along the x and y axis by those units. Change the numbers as required until you get what you need.
Err, good luck.
I'm not particular proficient with XML code, but I opened it in text editor and sure enough I was able to make certain things disappear by doing exactly that. It wasn't a particularly long code, but unfortunately it wasn't quite as easy as it would seem, as what you think is then a chunk of something - like first chunk is first digit, second chunk is second digit and so on - and then cutting and pasting that chunk, doesn't rearrange them in the way you would think either. Forsee lots of trial end error involved. Piqued my interest though.. something useful to learn.
mmm-five said:
Inkscape is an SVG/vector editor, so should work, but it will depend on how the SVG has been made in the first place and whether the text is a single element or individual elements.
If the former, you'd have to ungroup or split the element into individual letters.
However, it might be that the letters have been made as a cut-out from the background, so that there are no letters as such to edit.
I'm happy to put it into Illustrator to check it out if you're happy to share it here.
Sure thing. The proper link to one of them, unmodified, is here:If the former, you'd have to ungroup or split the element into individual letters.
However, it might be that the letters have been made as a cut-out from the background, so that there are no letters as such to edit.
I'm happy to put it into Illustrator to check it out if you're happy to share it here.
https://cdn.shopify.com/s/files/1/0042/0190/6234/t...
Like I said, it's pretty basic, and I need to make three new modified parody versions, that look the same as the original aside from the changes - one that says 001%, one that says 0.01% and another that says 000%.
Was quicker to successfully originally edit the jpegs as a test than to type this post
Edited by GCH on Wednesday 13th July 22:41
GCH said:
Amazing...thank you. So I am guessing it was a pretty simple edit?
Where would be best to learn the basics of this stuff?
It was just compound paths to make the letter cut out from the diamond background.Where would be best to learn the basics of this stuff?
These are the individual elements once the compound path has been released...
...and now that you've got all the elements separated, you can recolour and reorganise them...
Very simple in Illustrator (and would probably have used Fireworks in the past), but I've just picked up what I've needed to as the job requires.
You can get a trial of Illustrator (and other Adobe apps) direct from their website, and there are tutorials (free and paid) on places like VectorTuts.
There's even a free into one for Illustrator beginners... https://design.tutsplus.com/courses/from-the-top-a...
...here's one of my own 'parody' creations (for a Ring trip)...
Edited by mmm-five on Thursday 14th July 15:08
Gassing Station | Computers, Gadgets & Stuff | Top of Page | What's New | My Stuff