1

enter image description here

I have a folder with over 600 of such SVG images, and I want to remove all objects with the color value #FFFFE6 in all of them to save space. I can't use a magic wand tool because the color is separated into so many pieces.

How do I remove it?

  • 1
    You mention the "magic wand", but what software are you using? Please edit your question and provide more information or tag it with the relevant software. Thanks. – Billy Kerr Oct 28 '19 at 9:46
  • 1
    Can you provide one of the SVG files? They are effectively text files, and SVG has different ways to assign colors, so this might be an easy or not so easy task to do with a text editor or sed. – Michael Schumacher Oct 28 '19 at 10:20
  • 1
    +Billy Kerr any free software I'm okay with, even trial free, but available for windows 7 or windows 10 +Michael Schumacher Sorry, edited the question (I put a JPEG, because the SVGs are too big). But I won't scan it to text, because I want it to remain hand-written. – Qataada Oct 28 '19 at 10:46
  • 3
    You misunderstood me - SVG files are text files, at least in regard to the fact that you can use a text editor (or other text-editing tools) to modify them. See en.wikipedia.org/wiki/Scalable_Vector_Graphics - these are NOT your typical image file. – Michael Schumacher Oct 28 '19 at 13:46
  • 2
    All you need is a text editor to remove something from SVG files. – Scott Oct 28 '19 at 15:35
2

Basing on your example, the images are embedded within <defs></defs> block of the xml file.

You can try to use sed like in this example to remove the lines between <defs> and </defs>.

I'm on a Windows machine at the moment, and I've used a port, sed-windows, and the following command line get rid of the border of the image (beware that I've used the flag -i, that overrides the original file):

sed-4.7-x64.exe -i "/<defs>/,/<\/defs>/d" 12.svg

After this command, the SVG file is without the border (there are some graphical elements in circles, but I'm not able to understand them). See it here.

You can also use another similar command-line tools (awk, PowerShell, ...) and arrange a shell script to process all your images.

Update

If your original file is a PDF and you need to convert each page in SVG files, you can use a tool based on Poppler Library. For Windows you can find here a compressed file with the compiled binary utility pdftocairo.exe which can convert a PDF file to a SVG file.

In your case you simply need a shell script to extract each page and convert it to SVG. For example:

pdftocairo.exe -f 10 -l 10 -svg "Madina Mushaf_compressed.pdf" out_10.svg

The above command extract page 10 of the PDF and creates a SVG file, which you can process with sed.

|improve this answer|||||
  • Jazak Allah khayran, where do I put the command you gave me? – Qataada Oct 29 '19 at 19:44
  • I have them in a PDF (this: ). Can I just do it with just the pdf and then extract the SVGs? – Qataada Oct 29 '19 at 20:38
  • Script are usually text files with the commands to be executed. The exact syntax of a script depends on your Operating System. For Linux and macOS see this answer, for Windows see this one. – Paolo Gibellini Oct 30 '19 at 2:24
  • PDF structure is different from SVG structure. How have you obtained the SVG you posted? Can you be more precise, please? – Paolo Gibellini Oct 30 '19 at 2:28
  • It was first PDF and then I used an online tool from the Internet to convert the PDF to SVG. – Qataada Oct 30 '19 at 13:50
1

SVG Images are created via text markup which is actually XML. Much like editing a web page markup, you can learn, evaluate, and edit the text markup of SVG files using a text editor. SVG files are not like other image formats on the web. They are not enclosed single elements. They are text and are as editable as any text used in web page construction.

Web browsers read an svg file as text and then construct and render an image based upon that text. This is very similar to the way editing Cascading Style Sheets for a web page are all done via text edits, but browsers render colors and shapes when they read the CSS files.

Open the SVG in a text editor and search for "FFFFE6" you find elements using that color. You can then alter the color in the text editor and then save with an .svg suffix... changing the resulting svg file.

See here for more on editing SVG Markup


It should be noted that while the text structure of SVG files is the way they were intended to be usesd. SVG files can contain embedded raster images. Such embedded raster images will not be editable in the text editor. Instead the text editor will show that there is embedded image data rather than directly editable XML markup.

So.... how difficult or easy an SVG image is to edit depends greatly upon how the SVG was constructed initially.

|improve this answer|||||
  • Jazak Allah khayran for your effort, it appears (because none of their color values was found in the text editor) that the background and border are embedded raster images, so is there a way to remove those? – Qataada Oct 28 '19 at 20:47
  • If the image is a raster format, they you need to use raster tools (1), (2), to remove something such as that center color in the frame. Chances are the SVG format is most likely unwarranted and resulting in larger file sizes if ti's merely a raster image with an SVG "wrapper". – Scott Oct 28 '19 at 22:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.