Issue displaying svg

GoJS
1

I am trying to display gif and svg dynamically using same code below

$(go.Picture,
            {
              alignment: go.Spot.Left,
              row: 11, column: 0, columnSpan: 2,
              desiredSize: new go.Size(16, 16),
              margin: new go.Margin(0, 0, 0, 2), // (top,right,bottom,left)
            },
            new go.Binding('source', 'priorityIconUrl')),

It is working for gif properly but for svg it is partially rendering (only very little portion, not reduced scale). Please refer attached imagesvg%20issue

Is my approach right? what could be issue please?

Thanks

2

Is the behavior different on different browsers?
What is the SVG file?
Have you read GoJS Pictures -- Northwoods Software ?

1 Like
3

Hi walter,

Thanks for your reply, yes, I implemented code from the link you shared. But it is a good catch. I just tested with IE, it all looks good. Only in chrome it is issue, my chrome is latest (Version 72.0.3626.121 (Official Build) (64-bit))

Any recommendations please

Cheersgo%20picture

4

Well, that’s unusual. It’s usually IE that has a problem, for the reasons listed at that page about GoJS Pictures.

What is the SVG file?

5

Same feeling,
svg is the green down arrow as you see in the latest image.

Thanks

6

details of svg as below

<?xml version="1.0" encoding="utf-8"?>





7

Yes, but what are the SVG contents of that file? How else can we have any chance of helping you if we cannot reproduce the problem ourselves?

8

go%20picture
go picture.png943×184 13 KB

attached as image for your review please

9

I think it’s unreasonable to expect us to type everything in again by hand.

10

oops sorry, it is not allowing me to upload svg content

can you please access from here?

https://catchsoftware.atlassian.net/images/icons/priorities/lowest.svg

11

Got it. We’ll investigate.

12

As the pictures page mentions, you must set the width and height attributes in the <svg> tag, or some browswers will fail to render SVG on the HTML Canvas. This is a browser issue and not something we can control.

In your case, the view box is 0 0 64 64 So it seems natural to add:

   width="64" height="64"

To the <svg>. When you do this, it will work:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Lowest" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   width="64" height="64"
	 viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
<path fill="#55A557" d="M32,8.037L32,8.037c-2.2,0-4,1.8-4,4v39.926c0,2.2,1.8,4,4,4h0c2.2,0,4-1.8,4-4V12.037
	C36,9.837,34.2,8.037,32,8.037z"/>
<path fill="#55A557" d="M14.241,34.37L14.241,34.37c-1.556,1.556-1.556,4.101,0,5.657L29.01,54.796c1.556,1.556,4.101,1.556,5.657,0
	l0,0c1.556-1.556,1.556-4.101,0-5.657L19.897,34.37C18.342,32.815,15.796,32.815,14.241,34.37z"/>
<path fill="#55A557" d="M49.593,34.37L49.593,34.37c1.556,1.556,1.556,4.101,0,5.657L34.824,54.796
	c-1.556,1.556-4.101,1.556-5.657,0l0,0c-1.556-1.556-1.556-4.101,0-5.657L43.936,34.37C45.491,32.815,48.037,32.815,49.593,34.37z"
	/>
</svg>

Here is an example: https://codepen.io/simonsarris/pen/vPxPqG?editors=1011

13

Thanks Simon for your time on that. That gives more clarification now.

14

Unfortunately, I cannot find a workaround that works. You may need to do something else.