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

openElement

 > openElement General Discussion
  New Posts New Posts RSS Feed - Implement vector graphics
  FAQ FAQ  Forum Search   Register Register  Login Login

Implement vector graphics
 Post Reply Post Reply Page  12>
Author
Message
  Topic Search Topic Search  Topic Options Topic Options
cancerman View Drop Down
Newbie
Newbie


Joined: Apr 21 2019
Status: Offline
Points: 15 		Post Options Post Options   Thanks (0) Thanks(0)   Quote cancerman Quote  Post ReplyReply Direct Link To This Post Topic: Implement vector graphics
    Posted: Apr 21 2019 at 6:38pm
Hi there!

I'm no pro. I'm a "casual user" and I've run into a little problem. I want to implement vector graphics on a site I'm buildig, but I haven't found a way to do it using the openelement software (which in other ways is EXCELLENT). Can and would someone help me?

Kindest regards
P
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6209 		Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: Apr 22 2019 at 1:36pm
You can use svg files as background images.

Add a custom class to an element that can have a background image.  Let's name it: MyClass

Use the Project Ressource utility to add your file (myVectorGraphicFile.svg)

Then add a new css code block to your page.

.MyClass{
	background: url(/Files/Other/myVectorGraphicFile.svg)no-repeat center;
	background-size: cover;
}

It will not show on the working area but it will when previewing your page with your favorite browser.
Back to Top
cancerman View Drop Down
Newbie
Newbie


Joined: Apr 21 2019
Status: Offline
Points: 15 		Post Options Post Options   Thanks (0) Thanks(0)   Quote cancerman Quote  Post ReplyReply Direct Link To This Post Posted: Apr 22 2019 at 10:10pm
Thanks for the input and the tips. My thought was as an ordinary picture though. I found html code to do it, but the code didn't work when implemented on the page. But then again; I'm not a pro. I'm just dabbling.
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6209 		Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: Apr 22 2019 at 10:43pm
Are you talking about adding an svg file as an image or embedding the svg code into the htmlpage?
Back to Top
cancerman View Drop Down
Newbie
Newbie


Joined: Apr 21 2019
Status: Offline
Points: 15 		Post Options Post Options   Thanks (0) Thanks(0)   Quote cancerman Quote  Post ReplyReply Direct Link To This Post Posted: Apr 23 2019 at 11:36am
Adding it as an image.
Back to Top
cancerman View Drop Down
Newbie
Newbie


Joined: Apr 21 2019
Status: Offline
Points: 15 		Post Options Post Options   Thanks (0) Thanks(0)   Quote cancerman Quote  Post ReplyReply Direct Link To This Post Posted: Apr 23 2019 at 11:37am
I found this code, but I didn't make it work.

<img 
    src="equilateral.svg" 
    alt="triangle with all three sides equal"
    height="87px"
    width="100px" />
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6209 		Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: Apr 23 2019 at 12:10pm
This code works fine if you put it into a Code Block (Visual) element.

The other condition is that you put the svg file in the same folder as the page.  

<img
src="equilateral.svg"
alt="triangle with all three sides equal"
height="87px" 
width="100px" 
/>


This works fine too

<img src="equilateral.svg" alt="triangle with all three sides equal" height="87px" width="100px" />


Edited by Hobby001 - Apr 23 2019 at 12:11pm
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6209 		Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: Apr 23 2019 at 12:13pm
The only issue with your code is that it's not responsive
Back to Top
cancerman View Drop Down
Newbie
Newbie


Joined: Apr 21 2019
Status: Offline
Points: 15 		Post Options Post Options   Thanks (0) Thanks(0)   Quote cancerman Quote  Post ReplyReply Direct Link To This Post Posted: Apr 23 2019 at 1:09pm
Ahh! Super! Thanks :)
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6209 		Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: Apr 23 2019 at 2:05pm
If you use multiple pages and multiple images, you should consider building a folder system to prevent a messy site root directory 
Back to Top
 Post Reply Post Reply Page  12>
  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.109 seconds.