I received some downvotes on my previous post, and I'm not sure why. My question was clear, and I provided a lot of information. Let's give it another shot.
My issue is with exporting <SVG> files from an HTML document. When I try to open them in Illustrator or Inkscape, I get an error saying the file is corrupted.
The code snippet for reference:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="svg-converter.js"></script>
<script>
jQuery(document).ready(function($) {
$('.svg-convert').svgConvert();
});
</script>
... (Code continues)
I am using SVG Convert tool to convert .SVG files to <svg>, which works fine without any issues.
The conversion process successfully converts 2 .svg images to 2 <svg> elements. Here is a working example:
However, when I try to export these converted .SVG files and open them in Illustrator or Inkscape, I encounter a "file corrupted" message.
The exported .SVG code looks like this:
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<div xmlns="http://www.w3.org/1999/xhtml" id="mySVG">
<defs xmlns="http://www.w3.org/2000/svg"/>
<img src="https://cdn.kastatic.org/images/avatars/svg/leafers-sapling.svg" class="svg-convert" />
<img src="https://cdn.kastatic.org/images/avatars/svg/aqualine-sapling.svg" class="svg-convert" />
</div>
I need assistance in properly exporting all the <SVG> elements within the HTML page into a single .SVG file that can be opened and edited in vector programs like Illustrator or Inkscape.
Update: I have made changes to the code to make the .SVG file compatible with Inkscape. However, it only exports one SVG element instead of both:
<!DOCTYPE html>
... (Updated code snippet continues)