SVG image not displaying in Developer or when launched

Questions and answers for designing and implementing forms in Servoy

SVG image not displaying in Developer or when launched

Postby tkilshaw1553613063 » Tue Jul 26, 2022 8:17 pm

Using Servoy Version: 2020.6.0.3582 on Windows 10

I have an SVG image called DollarGreen which displays without problems in developer and when the solution is launched.

I made a new SVG image called DollarRed from the DollarGreen SVG code. The only change in the SVG is the color of the fill:
Code: Select all
<g transform="matrix(.16417 0 0 .1442 -3.4162 15.565)" fill="#029c0e">


was changed to:
Code: Select all
<g transform="matrix(.16417 0 0 .1442 -3.4162 15.565)" fill="#eb2d37">


I added the DollarRed.svg file to Servoy Developer using the "Import Media" menu item from the Media context menu. When clicked in the Media list in Servoy Developer the DollarRed image is correctly displayed. The same is true when I drag and drop it into the Chrome browser.

In the relevant css file, in addition to the css for the DollarGreen, I added a new DollarRed item:
Code: Select all
.DollarGreen {
   background-image: url(DollarGreen.svg);
   background-repeat: no-repeat;
   border: none;
   border-radius: 0 0 0 0;
}
.DollarRed {
   background-image: url(DollarRed.svg);
   background-repeat: no-repeat;
   border: none;
   border-radius: 0 0 0 0;
}


On the form I made a new Label/Button item and set it up identically to the DollarGreen item except that its style class was set to "DollarRed".

The DollarGreen image is visible on the form but DollarRed is not and the same is true when the solution is launched.

I have tried deleting and recreating it, tried restarting Developer, tried restarting my Windows 10. I have tried a project clean. Nothing works.

When I change the background-image css for DollarRed to DollarGreen the DollarGreen image is displayed. When I change it back to DollarRed, no image is shown.

This is a bit of a show-stopper. I need the image to appear.

Any help appreciated.

Terry
tkilshaw1553613063
 
Posts: 47
Joined: Tue Mar 26, 2019 5:11 pm

Re: SVG image not displaying in Developer or when launched

Postby ProRM » Thu Jul 28, 2022 10:48 pm

Hi Terry,

Can you share both svg images?

Regards,
User avatar
ProRM
 
Posts: 107
Joined: Thu Sep 18, 2008 10:24 pm
Location: Uruguay

Re: SVG image not displaying in Developer or when launched

Postby tkilshaw1553613063 » Fri Jul 29, 2022 9:52 pm

The DollarGreen SVG code:
Code: Select all
<?xml version="1.0" encoding="UTF-8"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg width="16" height="16" version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:osb="http://www.openswatchbook.org/uri/2009/osb" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:xlink="http://www.w3.org/1999/xlink">
<metadata>
  <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/>
   </cc:Work>
  </rdf:RDF>
</metadata>
<defs>
  <clipPath id="clipPath44">
   <path d="m61.8 117.26-0.2999-5.7416-4.7823-0.68017c-6.3822-0.90771-14.497-5.6045-18.362-10.628-3.0305-3.939-7.0803-12.818-6.2328-13.666 0.49358-0.49358 19.641-4.5433 21.481-4.5433 0.70738 0 1.8732 1.2235 2.5907 2.7189 1.9317 4.026 8.3104 7.2512 14.305 7.2328 5.8594-0.017992 8.5-1.6573 8.5-5.2768 0-3.3616-1.6508-4.2004-16.194-8.2288-20.821-5.7672-26.306-11.176-26.306-25.946 0-6.4052 0.4745-8.9638 2.3803-12.835 2.9431-5.978 9.5049-10.948 17.37-13.155l5.75-1.6138v-10.897h13v10.801l5.25 1.2355c7.5391 1.7742 11.758 4.1638 16.573 9.3874 3.6489 3.9586 6.8381 9.3577 5.9554 10.082-0.15289 0.12546-4.7227 1.6468-10.155 3.3808l-9.8772 3.1527-3.173-3.6706c-2.8172-3.259-3.8158-3.724-8.9044-4.1459-6.2113-0.51509-9.6683 1.2403-9.6683 4.9095 0 2.73 3.4017 4.3976 15 7.3535 13.655 3.4801 19.334 5.9921 23.009 10.178 4.2065 4.791 5.9906 9.6551 5.9906 16.333 0 15.293-9.0392 24.739-27.25 28.477-2.5968 0.53307-2.75 0.86977-2.75 6.0455v5.481h-12.9z"/>
  </clipPath>
  <clipPath id="clipPath48">
   <path d="m61.8 117.26-0.2999-5.7416-4.7823-0.68017c-6.3822-0.90771-14.497-5.6045-18.362-10.628-3.0305-3.939-7.0803-12.818-6.2328-13.666 0.49358-0.49358 19.641-4.5433 21.481-4.5433 0.70738 0 1.8732 1.2235 2.5907 2.7189 1.9317 4.026 8.3104 7.2512 14.305 7.2328 5.8594-0.017992 8.5-1.6573 8.5-5.2768 0-3.3616-1.6508-4.2004-16.194-8.2288-20.821-5.7672-26.306-11.176-26.306-25.946 0-6.4052 0.4745-8.9638 2.3803-12.835 2.9431-5.978 9.5049-10.948 17.37-13.155l5.75-1.6138v-10.897h13v10.801l5.25 1.2355c7.5391 1.7742 11.758 4.1638 16.573 9.3874 3.6489 3.9586 6.8381 9.3577 5.9554 10.082-0.15289 0.12546-4.7227 1.6468-10.155 3.3808l-9.8772 3.1527-3.173-3.6706c-2.8172-3.259-3.8158-3.724-8.9044-4.1459-6.2113-0.51509-9.6683 1.2403-9.6683 4.9095 0 2.73 3.4017 4.3976 15 7.3535 13.655 3.4801 19.334 5.9921 23.009 10.178 4.2065 4.791 5.9906 9.6551 5.9906 16.333 0 15.293-9.0392 24.739-27.25 28.477-2.5968 0.53307-2.75 0.86977-2.75 6.0455v5.481h-12.9z"/>
  </clipPath>
  <linearGradient id="linearGradient2498" x1="32.009" x2="105" y1="68.5" y2="68.5" gradientUnits="userSpaceOnUse">
   <stop stop-color="#0d1" offset="0"/>
   <stop stop-color="#0d1" stop-opacity="0" offset="1"/>
  </linearGradient>
</defs>
<g transform="matrix(.16417 0 0 .1442 -3.4162 15.565)" fill="#029c0e">
  <image transform="translate(0,-121)" width="137" height="137" clip-path="url(#clipPath48)" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIkAAACJCAMAAAAv+uv7AAAAflBMVEX///8AAAD29vaDg4P6+vrx 8fHl5eXg4ODt7e3d3d1tbW3Ozs4XFxcpKSno6OjX19fIyMgfHx/CwsJQUFAvLy+4uLhxcXGvr6+Y mJgjIyM6OjpOTk69vb00NDR1dXWRkZFiYmJ+fn4/Pz8MDAxeXl6ioqI+Pj6enp6MjIxHR0ej99WN AAAEPElEQVR4nO2b2ZaiMBBAJ0BYlbCIAWVVaO3//8ERexkUEiFU1DmH+9ocvR2SSlUl/vmzsLCw sLDw36B0eaUILir1l7P1QhM9QR2CV5qsOyKrV5oYi8kbm1hvY0K6a2eVLiYXHP8tTY7RyzwUfDp2 Y2weOFh7vgZ2qFreBPsL67yIyFNlcKDW2RENsTrk1HjStqwRdTMo8YufNa78kdHIlq/xLaMakkVI vBsjciGMTIkeGh3rcWG1JdJE9Hy8R8vxJEnE208TuXB2pYjcR48x5BJUrOkjch0VcBHTFhJBSIWO LI2gCEIUVsSbsHzvCGF3ooOwCEI15KyNZoggFMOJuOEskwQu2EarWSbIhhLBE6N8jxUGMiGcfMTf ZLsL2YY7bAWQSTqcnrXUEbEsw7AsEtlr5lMohBkU7cwW0f89Zjpn1s6UlDB5k858OZ+3X6DRwaf2 sWXCBDeHJbLrrc7efu3XjT70mcAm2/7bp93J8lkVEdSq4ZsMhHHt9LOGEruxoKsNj2Uy1KfAdfuX TRiDa/BM0GFgDniHsJKVSrNNUE37JZYhr7rgmFzWhuo9rxBmztjvqVk2zpMK4QcmLevD9mTJb1mM MGnJ7CLQQcNHD52ztd0NTWifT7DB7AZNHWty5RgW0gri6VlsXRWpjFnsjH49XXIP/jXptYgJWufw XeuGnbRxOVLoYXEeNNbY1MCTV6lETVDowKoQYRO0A25ds5PqhySwzQKzFFfJYF+QNaoNO4wNu4KE m0oIrgT8xhVrtF0BXkC4EIr6LSXwJqSlok2DBPw8TDkJDksOvxtiWou0dRLgmfJFau+nt6sBe20d FCM4T+28hbLSf81Nz9NSBXlHLJcpQ5o8Ga0D3KruQWh8trN3MGnBTjRiJ5Bh4hLn/qVjL4hK/uqG NVEwoeqhnRpD6Q8peWEPLGFSdBLF9u+Jhj1YA3s+2wQi3mPDieI8vMmqN97go5xqcXbFYUZVeNj0 /9fhoyxOMT+sPp6AOQ3joaCJ2eXI3I2HM9zqwPaK2Udjc2Msbw5W/Ra4yw65cxvEWsU26VdVCnsI P2YnKCk3XtlOpyOvWZxKfn5W8KjQCdUmIIZpkpRWnPNTiMtuMd+k/ZYsLMsHh6d7gGMVTzih71JB JEoVgIgPsuvwWtRjCWEOr6v5JkApgTvnKP9rSKC61wEn0I4hA7vrrUxM4+/YAHaV5nQskE8hTxZc 8esn0Km0IXrbwgfP6Ylgn1pCcSHUaFuBzpEftGb6YpZV+DkPiqs7skpK0+QKpqNK4Cu+6kg9FySn j1EeiS3/8Nak4aP5ctxHT7gz3GLQcrdhdE6Sg32S2bS5BxMvpUV+2yv+LPOCBjJuNjxCU2426U/L fMV1+y9ufqsCdmlNBGMx4ZtsX2lyc79sMfkyWd5O3+R9xiR5F5Pub2mrZzTm2XR/XvyyPWdhYWFh YWE6fwFSEkFMN0yldwAAAABJRU5ErkJggg== "/>
  <path transform="translate(0,-121)" d="m61.8 117.26-0.2999-5.7416-4.7823-0.68017c-6.3822-0.90771-14.497-5.6045-18.362-10.628-3.0305-3.939-7.0803-12.818-6.2328-13.666 0.49358-0.49358 19.641-4.5433 21.481-4.5433 0.70738 0 1.8732 1.2235 2.5907 2.7189 1.9317 4.026 8.3104 7.2512 14.305 7.2328 5.8594-0.017992 8.5-1.6573 8.5-5.2768 0-3.3616-1.6508-4.2004-16.194-8.2288-20.821-5.7672-26.306-11.176-26.306-25.946 0-6.4052 0.4745-8.9638 2.3803-12.835 2.9431-5.978 9.5049-10.948 17.37-13.155l5.75-1.6138v-10.897h13v10.801l5.25 1.2355c7.5391 1.7742 11.758 4.1638 16.573 9.3874 3.6489 3.9586 6.8381 9.3577 5.9554 10.082-0.15289 0.12546-4.7227 1.6468-10.155 3.3808l-9.8772 3.1527-3.173-3.6706c-2.8172-3.259-3.8158-3.724-8.9044-4.1459-6.2113-0.51509-9.6683 1.2403-9.6683 4.9095 0 2.73 3.4017 4.3976 15 7.3535 13.655 3.4801 19.334 5.9921 23.009 10.178 4.2065 4.791 5.9906 9.6551 5.9906 16.333 0 15.293-9.0392 24.739-27.25 28.477-2.5968 0.53307-2.75 0.86977-2.75 6.0455v5.481h-12.9z" clip-path="url(#clipPath44)" stroke="url(#linearGradient2498)"/>
</g>
</svg>


The code for DollarRed ws identical except for this tag:
Code: Select all
<g transform="matrix(.16417 0 0 .1442 -3.4162 15.565)" fill="#eb2d37">


So the only difference was the value of the "fill" attribute.

Tuan suggested that I remove the first two tags:

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


This I did and then deleted the existing svg media element from Servoy and then added it back in. After that it started to work once the relevant form was reopened.

Anyone have any idea why DollarGreen works but DollarRed needed those edits?

thanks,

Terry
tkilshaw1553613063
 
Posts: 47
Joined: Tue Mar 26, 2019 5:11 pm

Re: SVG image not displaying in Developer or when launched

Postby ProRM » Fri Jul 29, 2022 11:02 pm

Hi Terry,

Here I have Servoy Version: 2022.3.0.3742

I created two svg files (just removing the first two lines with the XML) and added them as images in a form and also using a styleClass on labels and both work. Please take a look at the attached image from my Servoy Designer.

Regards,
Attachments
svgForum.JPG
svgForum.JPG (88.19 KiB) Viewed 2398 times
User avatar
ProRM
 
Posts: 107
Joined: Thu Sep 18, 2008 10:24 pm
Location: Uruguay

Re: SVG image not displaying in Developer or when launched

Postby tkilshaw1553613063 » Sun Jul 31, 2022 8:32 pm

Juan,

thanks for your post. As you will see from my previous post that was the solution suggested to me by Tuan that worked for me.

Perhaps the original DollarGreen and DollarBlue SVG files that still have those first two XML elements: one for the XML declaration and the other an XML comment, and which do work in Servoy 202006, were added in a previous version of Servoy which did not have a problem with them?

Anyway, my svg is now properly displayed.

thanks,

Terry
tkilshaw1553613063
 
Posts: 47
Joined: Tue Mar 26, 2019 5:11 pm


Return to Forms

Who is online

Users browsing this forum: Google [Bot] and 10 guests