Hello! is there any way to upload and use a SVG picture in appery? Either as image or html
-
Alena Prykhodko
- Posts: 0
- Joined: Tue Apr 09, 2013 7:36 am
Using svg items
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.
Using svg items
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.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.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.257,23.405l-3.866,3.866l-3.737,3.737l-4.759,4.759c-2.521,0.161-5.096-0.713-7.023-2.64
c-1.927-1.927-2.8-4.502-2.64-7.023l4.759-4.759l3.737-3.737l3.866-3.866c0.251-0.251,0.251-0.659,0-0.911
c-0.046-0.046-0.101-0.074-0.155-0.103l0.001-0.001c-0.003-0.001-0.007-0.003-0.01-0.004c-0.034-0.017-0.066-0.032-0.102-0.043
c-2.677-1.193-5.629-1.878-8.749-1.878c-11.939,0-21.618,9.679-21.618,21.618c0,2.28,0.358,4.475,1.012,6.538L24.428,61.504
c-7.545,0.122-13.627,6.267-13.627,13.842c0,7.65,6.203,13.853,13.853,13.853c7.574,0,13.72-6.083,13.842-13.628l22.546-22.546
c2.063,0.654,4.259,1.012,6.539,1.012c11.939,0,21.618-9.679,21.618-21.618c0-3.118-0.686-6.066-1.877-8.742
c-0.012-0.041-0.029-0.079-0.05-0.118c-0.008-0.017-0.014-0.035-0.022-0.052l-0.007,0.007c-0.024-0.037-0.041-0.078-0.074-0.111
C86.916,23.153,86.509,23.153,86.257,23.405z M30.378,75.346c0,3.161-2.563,5.724-5.724,5.724c-3.161,0-5.724-2.563-5.724-5.724
c0-3.162,2.563-5.725,5.724-5.725C27.815,69.621,30.378,72.184,30.378,75.346z"/>
</svg>
</pre>
/code
-
Kateryna Grynko
- Posts: 0
- Joined: Thu Nov 15, 2012 9:13 am
Using svg items
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
Using svg items
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
-
Kateryna Grynko
- Posts: 0
- Joined: Thu Nov 15, 2012 9:13 am
Using svg items
Yan,
What is #Layer_1 ?
Add this code please:pre[name=htmlName]{
....
}/preWhere 'htmlName' is a name of HTML component.
Using svg items
#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.
Using svg items
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"
Using svg items
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) 
-
Kateryna Grynko
- Posts: 0
- Joined: Thu Nov 15, 2012 9:13 am
Using svg items
Hi Yan,
Please use this CSS instead of the above code:prediv[name=htmlName]{
overflow: hidden;
}/pre