39

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.)

Benjamin Loison
  • 3,782
  • 4
  • 16
  • 33
Johan
  • 20,067
  • 28
  • 92
  • 110
  • 1
    I asked a [similar question here](http://stackoverflow.com/questions/9651493/validating-svg-file-in-php-with-xmlreader) which should be of interest. – halfer Sep 17 '12 at 18:09
  • So I must look into something called RelaxNG? – Johan Sep 17 '12 at 19:05
  • Well, not quite - from the answer linked in that answer, it says there is a RelaxNG schema for Tiny 1.2, and a DTD for 1.1. For the full 1.2, the respondent says that there is no official schema. Perhaps you could take either of the above schemas and modify it to cover 1.2 - not a trivial task though, I would have thought! – halfer Sep 17 '12 at 21:44
  • But the file tells med both version="1.2" and baseProfile="tiny", so that should be svg 1.2 tini? And tini used the RelaxNG schema. so now I am confused... – Johan Sep 18 '12 at 14:30
  • Ah, I missed that detail in your question (and you'd stated in the title you were using version 1.2, which to me implies the full version). I would imagine the `baseProfile` attribute shows you are using Tiny 1.2. That's good news, because the respondent on the other question says that that can be validated, using a RelaxNG schema. – halfer Sep 18 '12 at 14:38
  • (I don't know much about this, so your questions would perhaps be best directed to the original thread. But it would be best to do some independent research on RelaxNG first - perhaps there is a a Tiny 1.2 verifier on the web?) – halfer Sep 18 '12 at 14:40

3 Answers3

25

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.

Erik Dahlström
  • 59,452
  • 12
  • 120
  • 139
  • The svg file can be found here https://github.com/jsiei97/FunTechHouse_RoomTemperature/blob/master/hw/LM35_bb.svg – Johan Sep 24 '12 at 19:15
  • That file renders just fine in Chromium, Firefox nightly, and Opera (tested on ubuntu 12.04). I wouldn't worry too much about SVG Tiny 1.2 validation since all the major browsers mostly do SVG 1.1 anyway, so validate against SVG 1.1 instead and you should be fine. There are some duplicated id attributes, some g elements that have invalid attributes. The filesize would be smaller and the markup much cleaner if CSS stylerules were used for the common properties. – Erik Dahlström Sep 24 '12 at 19:36
  • Unfortunately the links in the page you cite (which looked promising) are no longer valid :(: *500 Can't connect to qa-dev.w3.org:80 (Name or service not known)**. .. and indeed `dig +short a qa-dev.w3.org` shows nothing. :( – Pryftan Apr 28 '23 at 11:49
  • 1
    Through the Internet Wayback Machine I discovered this link that works: https://validator.w3.org/#validate_by_uri+with_options - as long as you specify the file type of course! There's also input and URI options. – Pryftan Apr 28 '23 at 11:57
4

There is a python utility in terminal svgcheck, which claims to target version 1.2, as defined in draft-7996-bis. A promising utility, IMHO.

SVG Checking Procedure.

pip install svgcheck

svgcheck ~/path/to/mysvgfile.svg

The svg file with proper standards will give something like:

$ svgcheck alert-circle.svg
Parsing file alert-circle.svg
INFO: File conforms to SVG requirements.
  • Make sure you have pip installed and python configured properly
KeshavDulal
  • 3,060
  • 29
  • 30
Ale
  • 887
  • 10
  • 14
  • I was having issues rendering some svgs on mobile which were working "fine" on web browsers (chrome). All I had to do was check the specs followed by remote-svgs and voila, I found they weren't following some. `svgcheck` saved the day. – KeshavDulal Sep 20 '20 at 07:51
  • Thanks. Despite what's written in the [specs](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/style), ` – StSav012 Mar 10 '21 at 12:05
  • i just tried to run it on `Inkscape` output svg, and `svgcheck` said the svg is completely erroneuos. Tons of errors. Trying to "fix" it with svgcheck resulted in a literraly B&W file with most elements removed. Let's tag inkscape people and svgcheck people, and not tell them who is who – Berry Tsakala Oct 08 '21 at 18:32
  • Inkscape by default generates Inkscape SVG files with a lot of their own properties. In the Save As dialog there is a dropdown to produce plain svg files. – TheCycoONE Oct 22 '21 at 15:25
  • 1
    Please note that "svgcheck" is an IETF tool to check SVG files for conformance with their own proposed profile named "SVG 1.2 RFC" which aims at using a subset of SVG Tiny 1.2 for providing graphics in their RFCs (see https://www.rfc-editor.org/rfc/rfc7996.html). Thus, this is might be not the right tool to verify an SVG file in general. – oli_arborum Mar 13 '23 at 14:30
1

For the subset SVG Tiny 1.2 Portable/Secure (SVG P/S), used for example in Brand Indicators for Message Identification (BIMI), see Using the RNC Schema to Validate BIMI SVG Images. It shows how to perform Relax NG Compact (RNC) XML schema validation on the command line.

pip3 install jingtrang
wget 'https://bimigroup.org/resources/SVG_PS-latest.rnc.txt'
pyjing -c SVG_PS-latest.rnc.txt my-image.svg

For my use-case, a PNG logotype converted to SVG Tiny 1.2 using png2svg, this was the output.

my-image.svg:1:159: error: value of attribute "baseProfile" is invalid; must be equal to "tiny-ps"
my-image.svg:1:174: error: element "g" not allowed yet; missing required element "title"

Errors were easily fixed by editing the baseProfile value and adding <title>A very nice image title</title>.

Joel Purra
  • 24,294
  • 8
  • 60
  • 60