Possible use of SVG? |
Post Reply |
Author | |
Bravo12
Senior Member Joined: Jun 07 2013 Location: Italy Status: Offline Points: 453 |
Post Options
Thanks(0)
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... |
|
Dmit OE
Admin Group Joined: May 31 2012 Status: Offline Points: 5283 |
Post Options
Thanks(0)
|
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 |
|
Bravo12
Senior Member Joined: Jun 07 2013 Location: Italy Status: Offline Points: 453 |
Post Options
Thanks(0)
|
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 |
|
Bravo12
Senior Member Joined: Jun 07 2013 Location: Italy Status: Offline Points: 453 |
Post Options
Thanks(0)
|
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... |
|
Dmit OE
Admin Group Joined: May 31 2012 Status: Offline Points: 5283 |
Post Options
Thanks(0)
|
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).
|
|
Bravo12
Senior Member Joined: Jun 07 2013 Location: Italy Status: Offline Points: 453 |
Post Options
Thanks(0)
|
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 |
|
Dmit OE
Admin Group Joined: May 31 2012 Status: Offline Points: 5283 |
Post Options
Thanks(0)
|
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?
|
|
Bravo12
Senior Member Joined: Jun 07 2013 Location: Italy Status: Offline Points: 453 |
Post Options
Thanks(0)
|
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... |
|
Dmit OE
Admin Group Joined: May 31 2012 Status: Offline Points: 5283 |
Post Options
Thanks(0)
|
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.
|
|
Bravo12
Senior Member Joined: Jun 07 2013 Location: Italy Status: Offline Points: 453 |
Post Options
Thanks(0)
|
Already sended you a link via pvt msg
|
|
Post Reply | |
Tweet
|
Forum Jump | Forum Permissions You cannot post new topics in this forum You cannot reply to topics in this forum You cannot delete your posts in this forum You cannot edit your posts in this forum You cannot create polls in this forum You cannot vote in polls in this forum |