BullGuard Antivirus Sale - 60% Off with openElement !
Forum Home Forum Home >

openElement

> Error Reports
  New Posts New Posts RSS Feed - Possible use of SVG?
  FAQ FAQ  Forum Search   Register Register  Login Login

Possible use of SVG?

 Post Reply Post Reply
Author
Message
Bravo12 View Drop Down
Senior Member
Senior Member
Avatar

Joined: Jun 07 2013
Location: Italy
Status: Offline
Points: 453
Post Options Post Options   Thanks (0) Thanks(0)   Quote Bravo12 Quote  Post ReplyReply Direct Link To This Post Topic: Possible use of SVG?
    Posted: Nov 06 2015 at 6:04pm
There is a way in oE for using an svg image or svg code as background? Svg is a good format 'cause is vectorial and keeps all datas inside, giving the chance to use them in "human way" (not totally machine coded).
How can be possible? I tried but I had bad results...
Back to Top
Dmit OE View Drop Down
Admin Group
Admin Group


Joined: May 31 2012
Status: Offline
Points: 5283
Post Options Post Options   Thanks (0) Thanks(0)   Quote Dmit OE Quote  Post ReplyReply Direct Link To This Post Posted: Nov 06 2015 at 8:36pm
Hi.

You can apply a Custom Class to an element then use a Code Block Source type CSS with code like

.myclass {background-size:cover; background-image:url (Files/Other/image.svg);}

Edited by Dmit OE - Nov 06 2015 at 8:37pm
Back to Top
Bravo12 View Drop Down
Senior Member
Senior Member
Avatar

Joined: Jun 07 2013
Location: Italy
Status: Offline
Points: 453
Post Options Post Options   Thanks (0) Thanks(0)   Quote Bravo12 Quote  Post ReplyReply Direct Link To This Post Posted: Nov 07 2015 at 1:31pm
I've alreeady tried it but it gaves me the same result as for other ways: the image still in the center and it's not expanded to all area, and it has only that size (original from the image).  See this example
that I used as first: http://helephant.com/2009/08/12/svg-images-as-css-backgrounds/

From that page I toke the code and tried to make the page, but the result was as told. Can it be 'cause in this new computer I'm using, I forgot to install Java runtime? (I did it now).



Edited by Bravo12 - Nov 07 2015 at 1:32pm
Back to Top
Bravo12 View Drop Down
Senior Member
Senior Member
Avatar

Joined: Jun 07 2013
Location: Italy
Status: Offline
Points: 453
Post Options Post Options   Thanks (0) Thanks(0)   Quote Bravo12 Quote  Post ReplyReply Direct Link To This Post Posted: Nov 07 2015 at 2:49pm
I forgot one thing: in the code you wrote, it is necessary to include 100% for width and height so the image can expand/contract to the page's size. Tried wiith thtat too, but same as up.
And I tried also to load all with <svg>...</svg> but the image still in the center leaving white spaces around... I need to cover all the space.

*It would be great to add an option in "Tools and Wizards" (Element style zone in up bar) for loading also svg...
Back to Top
Dmit OE View Drop Down
Admin Group
Admin Group


Joined: May 31 2012
Status: Offline
Points: 5283
Post Options Post Options   Thanks (0) Thanks(0)   Quote Dmit OE Quote  Post ReplyReply Direct Link To This Post Posted: Nov 09 2015 at 9:39am
Using the example page you gave, I tried the folowing Code Block CSS (after adding "svg" as Custom Class on a Group of Elements):

.svg {
background-image: url(http://helephant.com/wp-content/uploads/2009/08/svg-css-background.svg) !important;
background-size: cover !important;
}

(no need for 100%, that was for another kind of stretch)

and it works as it should. If you don't manage to make it work, please publish somewhere and give the link (specify what element to look at).
Back to Top
Bravo12 View Drop Down
Senior Member
Senior Member
Avatar

Joined: Jun 07 2013
Location: Italy
Status: Offline
Points: 453
Post Options Post Options   Thanks (0) Thanks(0)   Quote Bravo12 Quote  Post ReplyReply Direct Link To This Post Posted: Nov 09 2015 at 12:25pm
I had problem to answer you before. The line collapsed.
I tried what you wrote, but there is nothing to do. The only way for me to see accepted the svg is including the code between <svg> and </svg> contained in the svg file. For doing it I have to open the svg with notepad, copy the code as told up, and pasting it to the oE opened file. I can't understand why this happens. I have a fresh new computer, win7 and it works well for everything...no error inside it. Do I made error in something?

Mmmm, the line is making troubles. I see the page of the forum transforming between left side and center... this panel is floating between the two...


Edited by Bravo12 - Nov 09 2015 at 12:25pm
Back to Top
Dmit OE View Drop Down
Admin Group
Admin Group


Joined: May 31 2012
Status: Offline
Points: 5283
Post Options Post Options   Thanks (0) Thanks(0)   Quote Dmit OE Quote  Post ReplyReply Direct Link To This Post Posted: Nov 09 2015 at 12:29pm
There's nothing "special" about using SVG via the Code Block, and it works fine. There must be an error in the way you do it.

Try to create a new project, add a Frame, in its Properties -> Custom Classes type "svg". Then add a Code Block (Source) type CSS position Header, with the code:

.svg {
background-image: url(http://helephant.com/wp-content/uploads/2009/08/svg-css-background.svg) !important;
background-size: cover !important;
}

F12 to preview in the browser. Does it work?
Back to Top
Bravo12 View Drop Down
Senior Member
Senior Member
Avatar

Joined: Jun 07 2013
Location: Italy
Status: Offline
Points: 453
Post Options Post Options   Thanks (0) Thanks(0)   Quote Bravo12 Quote  Post ReplyReply Direct Link To This Post Posted: Nov 09 2015 at 8:32pm
I have also problem with connection to Oe site..!
Anyway nothing to do; only a doubled grey panel with rounded corners. No background. I tried also to give as url, the path to Files/Image/pict.svg, but also that doesn't work...
Back to Top
Dmit OE View Drop Down
Admin Group
Admin Group


Joined: May 31 2012
Status: Offline
Points: 5283
Post Options Post Options   Thanks (0) Thanks(0)   Quote Dmit OE Quote  Post ReplyReply Direct Link To This Post Posted: Nov 09 2015 at 9:01pm
The image in the example IS a kind of a grey panel with two halves; but you can use any other image, ex. http://blog.millermedeiros.com/wp-content/uploads/2010/04/awesome_tiger.svg

I will really really help if you publish the website and give the link and where to look. Everything will immediately become clear. Or send your project as before.
Back to Top
Bravo12 View Drop Down
Senior Member
Senior Member
Avatar

Joined: Jun 07 2013
Location: Italy
Status: Offline
Points: 453
Post Options Post Options   Thanks (0) Thanks(0)   Quote Bravo12 Quote  Post ReplyReply Direct Link To This Post Posted: Nov 09 2015 at 9:15pm
Already sended you a link via pvt msg 
Back to Top
 Post Reply Post Reply
  Share Topic   

Forum Jump Forum Permissions View Drop Down

Forum Software by Web Wiz Forums® version 12.04
Copyright ©2001-2021 Web Wiz Ltd.

This page was generated in 0.063 seconds.