Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I verify a SVG doc is correct? (version 1.2)

Tags:

svg

qt

I used a program called Fritzing to draw some basic Arduino schematics, and then export the output as a SVG. This works just as expected, but then I noticed that the SVG output only looks okay in some browsers and only okay in some versions of Firefox.

Since Fritzing is a open source app I figured that I could look into the code (and maybe help out a little).

But now over to the question, what is a correct SVG supposed to look like? What verifier over at W3C can I use to check the file?

I tried to use the verifiers found on this page: http://validator.w3.org/dev/tests/

But they all complained a lot, especially about the SVG version. The verifiers seem to like version 1.0 and 1.1, but when I look at the top of this file seems to be using version 1.2?

This is the top three lines from the problematic file (reformatted for readability):

<?xml version='1.0' encoding='UTF-8' standalone='no'?> <!-- Created with Fritzing (http://www.fritzing.org/) --> <svg width="3.50927in"      x="0in"      version="1.2"      y="0in"      xmlns="http://www.w3.org/2000/svg"      height="2.81713in"      viewBox="0 0 252.667 202.833"      baseProfile="tiny"      xmlns:svg="http://www.w3.org/2000/svg"> 

Is there a specific SVG 1.2 verifier I can use?

Or shall I try to verify the SVG as if it was a classical XML file?

(As a side note, Fritzing seems to use Qt, so if there some QTest I can use it may be useful.)

like image 998
Johan Avatar asked Sep 17 '12 17:09

Johan


People also ask

Are there different types of SVG files?

SVG allows three types of graphic objects: vector graphic shapes (such as paths consisting of straight lines and curves), bitmap images, and text. Graphical objects can be grouped, styled, transformed and composited into previously rendered objects.

How do I find my SVG code?

An alternative is to drag your svg image into Chrome, then view the page source to see the svg code. You can copy that and paste it anywhere you like. You'll see some fill colors in the code that you can play with too if you want to change them.

What should an SVG file look like?

An SVG file is a graphic saved in a two-dimensional vector graphic format created by the World Wide Web Consortium (W3C). It stores information that describes an image in a text format based on XML. SVG files may include vector shapes, embedded raster graphics (also known as bitmap images), and text.


1 Answers

You can use e.g http://validator.nu. Since your file is standalone, select xml parsing, paste the RNG url in the schema textfield (the schema url you're looking can be found in the relevant specification, in this case SVG 1.2 Tiny: http://www.w3.org/TR/SVGTiny12/relaxng/Tiny-1.2.rng ).

Even your three line snippet isn't valid SVG 1.2 Tiny content (x and y attributes are not allowed on the <svg> element in Tiny). You should add a link to your file somewhere, otherwise it's hard to say what it should look like.

like image 140
Erik Dahlström Avatar answered Oct 26 '22 22:10

Erik Dahlström