Forum | Appery.io

Hello! is there any way to upload and use a SVG picture in appery? Either as image or html

Hi Yan,

Only png, jpg, jpeg, gif formates are allowed.

You can add "HTML" component, set its dimensions and paste the following svg code:

precode
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>/code/pre

Also you can specify id for svg elements and access these elements through the js code.

Hi Alena,
thanks for your reply. I tried this and my svg renders with scroll bars. Is there any way to get rid of the scroll bars? Have attempted to change the viewport, width and height to no avail. My grid dimensions are 75x75px
code
<pre>
<svg version="1&#46;1" id="Layer_1" xmlns="http:&#47;&#47;www&#46;w3&#46;org/2000/svg" xmlns:xlink="http:&#47;&#47;www&#46;w3&#46;org/1999/xlink" x="0px" y="0px"
width="55px" height="55px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve" >

<path fill = "#FFFFFF" stroke="#000000" d="M86&#46;257,23&#46;405l-3&#46;866,3&#46;866l-3&#46;737,3&#46;737l-4&#46;759,4&#46;759c-2&#46;521,0&#46;161-5&#46;096-0&#46;713-7&#46;023-2&#46;64
c-1&#46;927-1&#46;927-2&#46;8-4&#46;502-2&#46;64-7&#46;023l4&#46;759-4&#46;759l3&#46;737-3&#46;737l3&#46;866-3&#46;866c0&#46;251-0&#46;251,0&#46;251-0&#46;659,0-0&#46;911
c-0&#46;046-0&#46;046-0&#46;101-0&#46;074-0&#46;155-0&#46;103l0&#46;001-0&#46;001c-0&#46;003-0&#46;001-0&#46;007-0&#46;003-0&#46;01-0&#46;004c-0&#46;034-0&#46;017-0&#46;066-0&#46;032-0&#46;102-0&#46;043
c-2&#46;677-1&#46;193-5&#46;629-1&#46;878-8&#46;749-1&#46;878c-11&#46;939,0-21&#46;618,9&#46;679-21&#46;618,21&#46;618c0,2&#46;28,0&#46;358,4&#46;475,1&#46;012,6&#46;538L24&#46;428,61&#46;504
c-7&#46;545,0&#46;122-13&#46;627,6&#46;267-13&#46;627,13&#46;842c0,7&#46;65,6&#46;203,13&#46;853,13&#46;853,13&#46;853c7&#46;574,0,13&#46;72-6&#46;083,13&#46;842-13&#46;628l22&#46;546-22&#46;546
c2&#46;063,0&#46;654,4&#46;259,1&#46;012,6&#46;539,1&#46;012c11&#46;939,0,21&#46;618-9&#46;679,21&#46;618-21&#46;618c0-3&#46;118-0&#46;686-6&#46;066-1&#46;877-8&#46;742
c-0&#46;012-0&#46;041-0&#46;029-0&#46;079-0&#46;05-0&#46;118c-0&#46;008-0&#46;017-0&#46;014-0&#46;035-0&#46;022-0&#46;052l-0&#46;007,0&#46;007c-0&#46;024-0&#46;037-0&#46;041-0&#46;078-0&#46;074-0&#46;111
C86&#46;916,23&#46;153,86&#46;509,23&#46;153,86&#46;257,23&#46;405z M30&#46;378,75&#46;346c0,3&#46;161-2&#46;563,5&#46;724-5&#46;724,5&#46;724c-3&#46;161,0-5&#46;724-2&#46;563-5&#46;724-5&#46;724
c0-3&#46;162,2&#46;563-5&#46;725,5&#46;724-5&#46;725C27&#46;815,69&#46;621,30&#46;378,72&#46;184,30&#46;378,75&#46;346z"/>

</svg>
</pre>
/code

Hi Yan,

You would need to change HTML component size to place your SVG inside. For example, prewidth: 100px;
height: 100px;/preYou can also remove scrolling this way:preoverflow:hidden;/pre

Hi, I have tried changing width and height (above) and overflow (code below), but it does not work.

code
#Layer_1 > path {
fill :#FFFFFF;
stroke :#000000;
overflow: hidden;
-webkit-user-select: none;
}
/code

Yan,

What is #Layer_1 ?
Add this code please:pre[name=htmlName]{
&#46;&#46;&#46;&#46;
}/preWhere 'htmlName' is a name of HTML component.

#Layer_1 is the id of the svg. Anyway, I have added
code
[name=wrench_html] {
overflow: hidden;
}
/code
but it is still the same. Could it be a bug in appery? I tried generating the svg using online tools and there is no scroll bar. The scroll bar only appears when using appery.

Hello,

1 Please remove all CSS styles you have added.

2 Navigate to html_component in page design mode and open "PROPERTIES - HTML"

3 Here is common property Dimension.

4 Please set this property to "auto" and "auto"

Thanks Igor. It works when I put it into the main body of the app. When used in a list within a panel, the horizontal scroll bar is still there (vertical scroll bar is gone)

Hi Yan,

Please use this CSS instead of the above code:prediv[name=htmlName]{
overflow: hidden;
}/pre