Flag of the Cook Islands not rendering properly.

Post questions on how to use or achieve an effect in Inkscape.
TheAlmightyGuru
Posts: 2
Joined: Fri May 03, 2013 6:26 am

Flag of the Cook Islands not rendering properly.

Postby TheAlmightyGuru » Fri May 03, 2013 6:34 am

The Flag of the Cook Islands on Wikipedia (http://en.wikipedia.org/wiki/File:Flag_ ... slands.svg) does not render properly in Inkscape. In particular, the white areas of the Union Jack extend beyond their bounds. However, it does render perfectly in assorted Internet browsers. Is this a fault of Inkscape? Is the flag using unsupported tags?

A similar problem can be seen in the flag for Niue (http://en.wikipedia.org/wiki/File:Flag_of_Niue.svg). Any ideas?

User avatar
brynn
Posts: 10309
Joined: Wed Sep 26, 2007 4:34 pm
Location: western USA
Contact:

Re: Flag of the Cook Islands not rendering properly.

Postby brynn » Fri May 03, 2013 10:15 pm

Image
Welcome to InkscapeForum!

I can't seem to dl the file. Either one. Well, that's not quite right -- I can dl them, but they're shown (in Windows Explorer) as "Invalid SVG file." Hhmmm.....I guess I could try to open them anyway, just to see what happens...... Let's see what Inkscape can do with it.... Nah, I get "Fails to load" error from Inkscape. I'm on Win7Home with Firefox, all current, in case anyone needs comparison.

Ok, well let's try this. Can you attach the file to a reply? It's probably a lost cause, but maybe I'd be able to get a good copy that way. Although, if it's corrupt, the forum upload might not accept it

I wonder if the problem you're having could have something to do with the error I'm getting??

Another idea :o :lol: Try making a new file. I have seen, once or twice, where someone took the content of a problematic file (corrupt), put it into a fresh new Inskcape doc, and saved, and that got rid of troublesome part. Try that, and then try to attach the new file.

Or, maybe someone else will be able to dl and open, or maybe fix the "invalid" part :?

v1nce
Posts: 696
Joined: Wed Jan 13, 2010 4:36 am

Re: Flag of the Cook Islands not rendering properly.

Postby v1nce » Fri May 03, 2013 10:56 pm

http://upload.wikimedia.org/wikipedia/c ... slands.svg displays fine in chrome and I can open it in inkscape

Edit:
Sorry I read too fast. Yes there are problems with the union Jack in inkscape
Last edited by v1nce on Sat May 04, 2013 1:05 am, edited 1 time in total.

Lazur
Posts: 4717
Joined: Tue Jun 14, 2016 10:38 am

Re: Flag of the Cook Islands not rendering properly.

Postby Lazur » Fri May 03, 2013 10:58 pm

There were some problems with the cleaning.

It said at the bottom that the union jack is a group of 4 objects, but couldn't ungroup it.
So I saved as a pdf, then reopened it and could adjust the things.
Attachments
Flag_of_the_Cook_Islands4.svg
(7.36 KiB) Downloaded 170 times

Lazur
Posts: 4717
Joined: Tue Jun 14, 2016 10:38 am

Re: Flag of the Cook Islands not rendering properly.

Postby Lazur » Fri May 03, 2013 11:00 pm

Here is the other one.
Quick editing, didn't bother with anti-aliasing in an export.
Attachments
Flag_of_Niue3.svg
(4.68 KiB) Downloaded 159 times

User avatar
brynn
Posts: 10309
Joined: Wed Sep 26, 2007 4:34 pm
Location: western USA
Contact:

Re: Flag of the Cook Islands not rendering properly.

Postby brynn » Fri May 03, 2013 11:39 pm

I was able to open it from v1nce's link. I have to say, whoever originally drew this did it in a clunky sort of way! And I'm not so familiar with either this or the British flag, but I think it's not an accurate representation. The red lines aren't centered within the white lines, like I'd expect. Well, actually, I guess that's how it's supposed to be, witness this: http://en.wikipedia.org/wiki/British_flag

There is indeed something functionally wrong with the Union Jack part of the flag. I can't ungroup it either.

I think I'd go with Lazur URH's repaired files, if I was in a hurry. But otherwise, I'd probably redraw that part myself, lol.

TheAlmightyGuru
Posts: 2
Joined: Fri May 03, 2013 6:26 am

Re: Flag of the Cook Islands not rendering properly.

Postby TheAlmightyGuru » Sat May 04, 2013 1:50 am

Thank you very much for cleaning them up, I really appreciate it.

I realize that the XML is pretty messy, but I wonder if anyone can comment to the fact that they render properly in Web browsers, but not in Inkscape. Should I write a bug report?

User avatar
BobSongs
Posts: 324
Joined: Fri Sep 14, 2007 2:18 pm
Location: Montreal, Canada

Re: Flag of the Cook Islands not rendering properly.

Postby BobSongs » Sat May 04, 2013 3:02 am

brynn wrote:I have to say, whoever originally drew this did it in a clunky sort of way!

I'd have to agree. I pulled in "Flag of Nieu.svg" and broke up the Union Jack from the stars and the yellow field.

However, the strangest thing happens. Moving the Union Jack causes it to grow about 4 times the size of the yellow field it came from. Further: moving the Union Jack is possible, but ... this is hard to explain until you see it: when I moved it, the dotted "selection" rectangle remains over the top left corner of the flag in its original size and NOT around the oversized Union Jack that's moved around. Unselect everything then click the Union Jack and the selection rectangle re-appears in the yellow field, not around the item being moved.

This leads me to suspect these SVGs were not created using Inkscape. Perhaps these are exports from some other software that look fine in a webpage but act in a very odd way. The "Flag of Nieu.svg" SVG file itself bears little resemblance to something created by Inkscape:

Code: Select all

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="300" viewBox="0 0 120 60">
<title>Flag of Niue</title>
<rect fill="#fcd116" width="120" height="60"/>
<svg width="60" height="30" viewBox="0 0 12 6">
   <rect fill="#002868" width="12" height="6"/>
   <clipPath id="t">
      <path d="M6,3 h6 v3 z v3 h-6 z h-6 v-3 z v-3 h6 z"/>
   </clipPath>
   <g stroke="#cf142b" stroke-width="1.2">
   <path d="M0,0 L12,6 M12,0 L0,6" stroke="#fff"/>
   <path d="M0,0 L12,6 M12,0 L0,6" clip-path="url(#t)" stroke-width="0.8"/>
   <path d="M6,0 v6 M0,3 h12" stroke="#fff" stroke-width="2"/>
   <path d="M6,0 v6 M0,3 h12"/>
</g>
</svg>
<g transform="translate(30,15)" fill="#fcd116">
<g transform="scale(5.10390485)">
<circle r="1" fill="#002868"/>
<polygon id="s" points="0,-513674 301930,415571 -488533,-158734 488533,-158734 -301930,415571" transform="scale(0.00000194676)"/>
</g>
<use xlink:href="#s" transform="translate(-17.5,0.29) scale(3)"/>
<use xlink:href="#s" transform="translate(17.5,0.29) scale(3)"/>
<use xlink:href="#s" transform="translate(0,10.29) scale(3)"/>
<use xlink:href="#s" transform="translate(0,-9.71) scale(3)"/>
</g>
</svg>

The following is a simple light green circle drawn in Inkscape with the page resized to the selection:

Code: Select all

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<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"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="88.571426"
   height="88.571426"
   id="svg3081"
   version="1.1"
   inkscape:version="0.48.4 r9939"
   sodipodi:docname="Inkscape Drawing.svg">
  <defs
     id="defs3083" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="0.35"
     inkscape:cx="-265.00001"
     inkscape:cy="-317.14286"
     inkscape:document-units="px"
     inkscape:current-layer="layer1"
     showgrid="false"
     inkscape:window-width="1680"
     inkscape:window-height="996"
     inkscape:window-x="-4"
     inkscape:window-y="-4"
     inkscape:window-maximized="1"
     fit-margin-top="0"
     fit-margin-left="0"
     fit-margin-right="0"
     fit-margin-bottom="0" />
  <metadata
     id="metadata3086">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(-128.57143,-126.6479)">
    <path
       sodipodi:type="arc"
       style="fill:#ddff55;fill-opacity:1;fill-rule:nonzero;stroke:none"
       id="path3095"
       sodipodi:cx="172.85715"
       sodipodi:cy="170.93361"
       sodipodi:rx="44.285713"
       sodipodi:ry="44.285713"
       d="m 217.14286,170.93361 c 0,24.45832 -19.82739,44.28571 -44.28571,44.28571 -24.45833,0 -44.28572,-19.82739 -44.28572,-44.28571 0,-24.45833 19.82739,-44.28571 44.28572,-44.28571 24.45832,0 44.28571,19.82738 44.28571,44.28571 z" />
  </g>
</svg>

hulf2012
Posts: 716
Joined: Sat Nov 24, 2012 12:37 pm

Re: Flag of the Cook Islands not rendering properly.

Postby hulf2012 » Sat May 04, 2013 3:20 am

Hello:
My veredict is that both inkscape and wikipedia are guilty:
The svg file has inside another svg, look:

Code: Select all

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="300">
   <rect width="600" height="300" fill="#00247d"/>
   <svg width="300" height="150">
      <path d="M 0,0 L 300,150 M 300,0 L 0,150" stroke="#fff" stroke-width="30"/>
      <clipPath id="patrick">
         <path d="M 150,75 h 150 v 75 z v 75 H 0 z H 0 V 0 z V 0 h 150 z"/>
      </clipPath>
      <path d="M 0,0 L 300,150 M 300,0 L 0,150" stroke="#cf142b" stroke-width="20" clip-path="url(#patrick)"/>
      <path d="M 150,0 v 150 M 0,75 h 300" stroke="#fff" stroke-width="50"/>
      <path d="M 150,0 v 150 M 0,75 h 300" stroke="#cf142b" stroke-width="30"/>
   </svg>
   <g transform="translate(450,150)">
      <g id="star" transform="translate(0,-102)" fill="#fff">
         <g id="c">
            <path id="t" d="M 0,-22.5 V 0 H 12" transform="rotate(18 0,-22.5)"/>
            <use xlink:href="#t" transform="scale(-1,1)"/>
         </g>
         <use xlink:href="#c" transform="rotate(72)"/>
         <use xlink:href="#c" transform="rotate(144)"/>
         <use xlink:href="#c" transform="rotate(216)"/>
         <use xlink:href="#c" transform="rotate(288)"/>
      </g>
      <use xlink:href="#star" transform="rotate(24)"/>
      <use xlink:href="#star" transform="rotate(48)"/>
      <use xlink:href="#star" transform="rotate(72)"/>
      <use xlink:href="#star" transform="rotate(96)"/>
      <use xlink:href="#star" transform="rotate(120)"/>
      <use xlink:href="#star" transform="rotate(144)"/>
      <use xlink:href="#star" transform="rotate(168)"/>
      <use xlink:href="#star" transform="rotate(192)"/>
      <use xlink:href="#star" transform="rotate(216)"/>
      <use xlink:href="#star" transform="rotate(240)"/>
      <use xlink:href="#star" transform="rotate(264)"/>
      <use xlink:href="#star" transform="rotate(288)"/>
      <use xlink:href="#star" transform="rotate(312)"/>
      <use xlink:href="#star" transform="rotate(336)"/>
   </g>
</svg>


There is a svg tag inside the svg. In a text editor, if you change the "svg tag" for a "g tag" (a group tag), you can change the union jack flag as a group. The union jack is "clipped" for a very strange path. So unclip the flag, and change the cliping path for a rectangular path.

As far as I now, the SVG rules permit the use of a "svg tag" inside a "svg tag", which Inkscape doesn't recognize. The other thing is the original clipping path. It's very strange, like an odd star.

Greetings

P.D. : Bobsongs, you shot first cowboy!
If you have problems:
1.- Post a sample (or samples) of your file please.
2.- Please check here:
http://tavmjong.free.fr/INKSCAPE/MANUAL/html/index.html
3.- If you manage to solve your problem, please post here your solution.

User avatar
BobSongs
Posts: 324
Joined: Fri Sep 14, 2007 2:18 pm
Location: Montreal, Canada

Re: Flag of the Cook Islands not rendering properly.

Postby BobSongs » Sat May 04, 2013 5:21 am

hulf2012 wrote:There is a svg tag inside the svg. In a text editor, if you change the "svg tag" for a "g tag" (a group tag), you can change the union jack flag as a group. The union jack is "clipped" for a very strange path. So unclip the flag, and change the cliping path for a rectangular path.

As far as I now, the SVG rules permit the use of a "svg tag" inside a "svg tag", which Inkscape doesn't recognize. The other thing is the original clipping path. It's very strange, like an odd star.

Oh, GOOD call. While familiar with the basics of HTML and mark up code, I didn't exactly identify the embedded <svg> as an oddity. Just that I've seen the insides of an Inkscape file with long list of sodipodi markings.

hulf2012 wrote:P.D. : Bobsongs, you shot first cowboy!

I may have shot first, but you actually hit the target! :D


Return to “Help with using Inkscape”