Help:SVG/basic1

 

It has been suggested that this page should be merged into Help:Illustrator. (discuss)

From invalid to valid SVG: Adobe Illustrator files

This page is under construction, or in the middle of an expansion or major redevelopment. You are welcome to assist in its construction by editing it as well.

To make Adobe Illustrator SVG files valid according to the guidelines of W3C and its validator: http://validator.w3.org/#validate_by_upload, these steps are required:

1. Load the Adobe Illustrator SVG file into Inkscape. Select all the elements of the file. Ungroup all the elements of the file. And the press File/Vacuum Defs. This will declutter the file.

2. It might be that the file is still not W3C-valid. One reason can be the text in the SVG file. A quick and dirty solution is to press Path/Object to Path with all the elements of SVG file still selected. All the elements of the SVG file will be paths now. Regroup all the elements of the file by pressing the group button or by pressing CTRL+G.

3. Save the file as Plain SVG. (There is no consensus on this. For the pros and cons on this, see this page: Help:Inkscape #Bugs and workarounds). Regroup all the elements of the file by pressing the group button or by pressing CTRL+G.

4. Save the file as Plain SVG.

• 
  Group and Ungroup buttons
• 
  Vacuum Defs
• 
  Path/Object to Path

2. Most often this is not enough: open the Adobe Illustrator file with a text editor and check the file: Remove code like:

• <flowroot>code</flowroot>
• <switch>code</switch>
• Big data blocks of what appears to be like random data between the tags i:pgf and /i:pgf can be removed.
• <metadata>code </metadata>

These are big chunks of code. Don't hesitate to remove this code. Save your file as a new file like [your-file_a] so that you don't loose your original file. In that way you can always return to the original file if something goes wrong.

• 
  Data block

3. Take a look at the start of the file.

<svg
   xmlns:stEvt="http://ns.adobe.com/xap/1.0/sType/ResourceEvent#"
   xmlns:xmpMM="http://ns.adobe.com/xap/1.0/mm/"
   xmlns:xmpG="http://ns.adobe.com/xap/1.0/g/"
   xmlns:stFnt="http://ns.adobe.com/xap/1.0/sType/Font#"
   xmlns:stDim="http://ns.adobe.com/xap/1.0/sType/Dimensions#"
   xmlns:xmpTPg="http://ns.adobe.com/xap/1.0/t/pg/"
   xmlns:pdf="http://ns.adobe.com/pdf/1.3/"
   xmlns:xmpGImg="http://ns.adobe.com/xap/1.0/g/img/"
   xmlns:xmp="http://ns.adobe.com/xap/1.0/"
   xmlns:x="adobe:ns:meta/"
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   version="1.0"
   width="344"
   height="563"
   viewBox="0 0 344 563" (etc, etc.)

• 
  Heading code of SVG file

There is still Adobe code within the file. Remove the header of the file starting from the <svg> up to the <g> tag.

4. Insert this code into the header of the file:

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.2"
   width="1600.077"
   height="1199.851"
   id="svg2">

5. Although valid, the width and the height of the file may not be correct. Open up Inkscape, select the drawing and click "Document Properties/Resize page to content". And push the button "Resize page to drawing or selection". Save as Plain SVG.
This step can also be done manually by changing the width and the height in the code.

• 
  Viewport in Inkscape

6. Let's validate the file now. Goto http://validator.w3.org/ and select "Validate by file upload". Select your file and check whether or not your SVG file is valid. If it is not, then change the code and try again and then press "Revalidate".

• 
  W3C validation
• 
  W3C-invalid
• 
  W3C-valid

7. Upload the new version, valid SVG version to Wikimedia Commons. Then go to Edit. Replace the InvalidSVG template with the template {{Adobe}}. In the preview of your edit you can test the validity; if it's valid, then save the edits with the parameter "v": {{Adobe|v}}. Now your job is done.

• 
  Adding templates