hoseinmirian
Posts: 7
Joined: Thu Oct 14, 2021 11:22 am

custom icons loading on web but not exported properly

I am using custom svg icons as marker in our open source project and it shows well in the browser but when I export the file it shows question mark in the output file. please visit the code in the below repo:
thanks.

https://github.com/FAIRsharing/fairshar ... kGraph.vue
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: custom icons loading on web but not exported properly

Hi,

Welcome to our forum and thanks for contacting us with your question!

I've reproduced your problem and in my case, everything is working correctly.

Demo
https://codesandbox.io/s/highcharts-vue ... /Chart.vue
(Use option "Open in the new window")

Please, make sure you have imported all modules correctly.

Documentation
https://github.com/highcharts/highcharts-vue

Feel free to ask any further questions,
Regards!
Magdalena Gut
Developer and Highcharts Support Engineer
hoseinmirian
Posts: 7
Joined: Thu Oct 14, 2021 11:22 am

Re: custom icons loading on web but not exported properly

Thanks for answering but I, unfortunately, your answer was not very helpful and relevant and I ll need your more consideration about my problem. As you suggested I appreciate if you check my code where I have initialized highchart as well as my package.json content. Thanks.

https://github.com/FAIRsharing/fairshar ... rc/main.js

https://github.com/FAIRsharing/fairshar ... ckage.json
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: custom icons loading on web but not exported properly

Hi,

I'm sorry, but we don't do code reviews on the Github repositories.

Please, reproduce your issue to the simplified working demo, that I could work on.
You can start here: https://codesandbox.io/s/highcharts-vue-demo-ttner

If your symbol is an svg you can add it as a path or use the external link.

Regards!
Magdalena Gut
Developer and Highcharts Support Engineer
hoseinmirian
Posts: 7
Joined: Thu Oct 14, 2021 11:22 am

Re: custom icons loading on web but not exported properly

Thank you for your response. I have prepared a sample of what we are doing. Simply loading markers from our server which is a SVG file and you can see in the output that is printed properly as expected but when I press export from the right popup menu-> export as (anytype) :
- in chrome and firefox it does not do anything and if you open the console, it says that Iframe has blocked this due to existed sandbox attribute.
- in Safari it exports properly and exactly shows what is our problem now which export the chart properly as a file but when you open it you can see that svg markers are showing as a question marks and not representing an actual images.

I also created a button to manually export the chart manually but it is getting error as well.

I suggest first testing the exporting process in safari and then checking other odds. Thank you very much.

https://codesandbox.io/s/highcharts-vue ... ue:171-208
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: custom icons loading on web but not exported properly

Hi,

Thank you for uploading the demo!

Indeed, exporting to a raster format generates question marks, but I've tested it with a random svg icon instead of yours, and it works properly.
Here is a sample: https://codesandbox.io/s/highcharts-vue ... rked-u6901

There must be a problem with your server or image.

Best regards!
Magdalena Gut
Developer and Highcharts Support Engineer
hoseinmirian
Posts: 7
Joined: Thu Oct 14, 2021 11:22 am

Re: custom icons loading on web but not exported properly

we aren't aware of any problem with server or image - what sort of problem may interfere with their library? Thank you.
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: custom icons loading on web but not exported properly

Hi,

I looked closely at your svg image code and the problem was caused by styles. I've changed them to the inline styles and it seems to work well.

Use the following code in your svg file:

Code: Select all

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.83 28.83">
<g id="Layer_2" data-name="Layer 2">
<g id="Layer_1-2" data-name="Layer 1">
<circle cx="14.41" cy="14.41" r="14.41" fill="#616160"/>
<path d="M24.61,4.22A14.42,14.42,0,0,1,4.22,24.61" fill="#999" opacity= "0.46"/>
<path d="M21.83,22.57a.44.44,0,0,1-.45.41H9.08a.43.43,0,0,1-.45-.41V6.14a.43.43,0,0,1,.45-.41h12.3a.44.44,0,0,1,.45.41Z" fill="#fff"/>
<rect x="10.38" y="9.18" width="9.3" height="1.49"  fill="#c8cbcf"/>
<rect x="10.38" y="12.03" width="6.14" height="1.49" fill="#c8cbcf"/>
<rect x="10.38" y="14.81" width="10.33" height="1.49" fill="#c8cbcf"/>
<rect x="10.38" y="17.74" width="6.14" height="1.49"  fill="#c8cbcf" />
<path d="M15.23,10.72a3.64,3.64,0,1,0,3.66,3.63A3.64,3.64,0,0,0,15.23,10.72Zm2.11,2.69L14.7,16a.11.11,0,0,1-.17,0l-1.41-1.4a.12.12,0,0,1,0-.17l.56-.55a.12.12,0,0,1,.17,0l.68.67a.11.11,0,0,0,.17,0l1.9-1.88a.11.11,0,0,1,.17,0l.57.55A.14.14,0,0,1,17.34,13.41Z" fill="#616160"/>
<path d="M17.34,13.41,14.7,16a.11.11,0,0,1-.17,0l-1.41-1.4a.12.12,0,0,1,0-.17l.56-.56a.14.14,0,0,1,.17,0l.68.68a.11.11,0,0,0,.17,0l1.9-1.88a.11.11,0,0,1,.17,0l.57.55A.14.14,0,0,1,17.34,13.41Z" fill="#f3f6f7"/></g></g></svg>
Let me know if that worked for you,
Regards!
Magdalena Gut
Developer and Highcharts Support Engineer
hoseinmirian
Posts: 7
Joined: Thu Oct 14, 2021 11:22 am

Re: custom icons loading on web but not exported properly

I did inline all our icons in beta.fairsharing.org as you can check in the code sandbox but still did not work. Please let me know about it. thanks :wink:
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: custom icons loading on web but not exported properly

Hi,

My bad, I meant - without style attribute - as I did in the attached code. Anyways, here is the working demo:
https://codesandbox.io/s/highcharts-vue ... rked-rvenr

Feel free to ask any further questions,
Regards!
Magdalena Gut
Developer and Highcharts Support Engineer
hoseinmirian
Posts: 7
Joined: Thu Oct 14, 2021 11:22 am

Re: custom icons loading on web but not exported properly

I uploaded the exact svg code in our server you provided in your last comment without having styles and you can replace the URL with this one
"url(https://beta.fairsharing.org/assets/rec ... deline.svg)",

and as you can see still it is showing the SVG but not printing it.

to make sure the code is the same as yours please visit the link by copy the whole text and pasting it in your firefox or chrome to the file source:

>
view-source:https://beta.fairsharing.org/assets/rec ... deline.svg
<

Thank you :wink:
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: custom icons loading on web but not exported properly

Hi,

I see now, the problem is not associated with styles, but everything points to the issue with the host, not with the library. The link may not be interpreted correctly or it has some locks from the site it is hosted on. As a workaround, you can load your icons from a local path or from a different host.

If using beta.fairsharing.org is necessary for your project, please report an issue here: https://github.com/highcharts/highcharts/issues and our GitHub developers will try to find the best solution for you.

Regards!
Magdalena Gut
Developer and Highcharts Support Engineer
hoseinmirian
Posts: 7
Joined: Thu Oct 14, 2021 11:22 am

Re: custom icons loading on web but not exported properly

Thank you for your support. relevant ticket created in the github.
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: custom icons loading on web but not exported properly

You're welcome! In case of any further questions, feel free to contact us again.
Magdalena Gut
Developer and Highcharts Support Engineer

Return to “Highcharts Usage”