Change color of svg image
Hello experts,
I have attached the following svg image.
I was wondering which approach can I adopt to change the color of image from black to grey.
I tried ifranview tool but the output quality is not as expected.
I would like to know if I can directly modify the code or using another tool.
Thank you in advance for your help.
Regards,
Luis.
battery1_test.svg
I have attached the following svg image.
I was wondering which approach can I adopt to change the color of image from black to grey.
I tried ifranview tool but the output quality is not as expected.
I would like to know if I can directly modify the code or using another tool.
Thank you in advance for your help.
Regards,
Luis.
battery1_test.svg
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Hey Luis,
That depends on your skillset, the exact content of the 600 files, and what you intend to use the files for.
If the content of the files is consistent, and you have the skills, you could quite easily write a script to add the colour.
If you intend to use these files in webpages, then you're probably better off creating a Font from the files and then using that. This way you can have all your 600 files available in one 'font' and you can size and colour them with CSS. Take a look at https://icomoon.io - it's an online font generator - you can import all your svg files and generate a font.
That depends on your skillset, the exact content of the 600 files, and what you intend to use the files for.
If the content of the files is consistent, and you have the skills, you could quite easily write a script to add the colour.
If you intend to use these files in webpages, then you're probably better off creating a Font from the files and then using that. This way you can have all your 600 files available in one 'font' and you can size and colour them with CSS. Take a look at https://icomoon.io - it's an online font generator - you can import all your svg files and generate a font.
ASKER
Thank you Chris:
I think that I am going to proceed like this:
1.Just change the color within the SVG file itself as following:
Which give the following result:
2.Set up a batch to do it massively for the other icons.
3.And finally save massively the svg files as png also through a batch.
Regards,
Luis.
I think that I am going to proceed like this:
1.Just change the color within the SVG file itself as following:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
<path style="fill: #888" d="M230 798c12 0 21-10 21-21 0-12-9-22-21-22h-32c-5 0-9-2-12-6s-4-8-4-15V232c-1-10 6-18 14-19h28c6 0 11-3 16-8 4-4 6-10 5-16-1-10 6-18 14-19h57c10 1 17 10 16 19-1 6 1 12 5 17 4 4 10 7 16 7l25-1c10 2 17 10 16 22v11c0 11 10 21 21 21 12 0 22-10 22-21v-9c3-33-22-62-57-66h-8c-7-23-27-40-54-43h-61c-25 3-45 20-52 43h-12c-33 4-57 33-53 64v498c-2 16 3 31 13 44 10 12 24 20 43 22h34zm379 100c22 0 43-9 59-26 15-21 23-46 21-70V440h112c22 1 43-5 63-21 29-28 29-75-2-105-18-14-40-20-61-19H413c-22-1-43 5-62 19-15 14-24 34-23 53-1 20 8 40 24 55 18 13 39 19 60 18h115v361c-2 25 6 50 23 72 15 16 36 25 58 25h1zM410 397c-12 1-23-2-31-8-5-5-8-13-8-22 0-8 3-16 7-19 9-7 21-11 34-10h391c12-1 24 2 31 8 12 12 12 31 2 41-9 7-21 11-33 10H647v407c1 15-4 30-12 40-7 7-16 12-26 12-11-1-21-5-27-11-9-12-13-26-12-43V397H410zm-52 401l25-1c32-3 57-33 54-63V489c0-12-10-22-22-22-11 0-21 10-21 22v247c1 9-6 18-14 19h-22c-12 0-21 9-21 21s9 22 21 22z"/>
</svg>Which give the following result:
2.Set up a batch to do it massively for the other icons.
3.And finally save massively the svg files as png also through a batch.
Regards,
Luis.
ASKER