Hi everyone, I wanted to know if any of you have any experience with changing png or svg to html coding? Currently I am using the mockup photos I made as the website pages, and while functional, I am looking to convert over to html if at all possible.
Thanks in advance!
svg to html coding - Post ID 302969
Zoe
Guest
74 posts
Wayan Jaya
Registered User
4,806 posts
Online Now
Hi Zoe
Not really sure what you mean, but I can imagine that isn't feasible within site designer, without so much messing about and such, that it would be easier and quicker to create the pages using site designer the way it's made to be used.
Not really sure what you mean, but I can imagine that isn't feasible within site designer, without so much messing about and such, that it would be easier and quicker to create the pages using site designer the way it's made to be used.
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?
LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?
LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
Zoe
Guest
74 posts
Wayan Jaya wrote:
Hi Zoe
Not really sure what you mean, but I can imagine that isn't feasible within site designer, without so much messing about and such, that it would be easier and quicker to create the pages using site designer the way it's made to be used.
Hi Zoe
Not really sure what you mean, but I can imagine that isn't feasible within site designer, without so much messing about and such, that it would be easier and quicker to create the pages using site designer the way it's made to be used.
Okay awesome, thank you for letting me know. I really appreciate it!
Cary
Ambassador
1,073 posts
I too am not sure what you are asking, so...
For png and svg images you can insert them into pages by first going to your "Resources" and selecting the "images" folder. Use the "Add files" button to add png and svg images to the folder which can then be inserted into "picture" elements that you have added to your layout. Right-click the "picture" element and select "Edit Picture" to load a new image.
If the images are part of a larger layout design image, then normally the software used to create the layout image has the ability to export the pieces of the image you need.
If you wish to embed the svg images, you need to insert an "HTML" element onto the page. With "HTML" element selected, switch to the "Element" panel and see the window "Enter you HTML for this Element".
Open your svg image in a text editor and copy all the text between and including the opening and closing svg tags. Then paste that code into the window of the element panel and make sure "Show Live Preview" below that window is checked.
Example of copied SVG code...
For png and svg images you can insert them into pages by first going to your "Resources" and selecting the "images" folder. Use the "Add files" button to add png and svg images to the folder which can then be inserted into "picture" elements that you have added to your layout. Right-click the "picture" element and select "Edit Picture" to load a new image.
If the images are part of a larger layout design image, then normally the software used to create the layout image has the ability to export the pieces of the image you need.
If you wish to embed the svg images, you need to insert an "HTML" element onto the page. With "HTML" element selected, switch to the "Element" panel and see the window "Enter you HTML for this Element".
Open your svg image in a text editor and copy all the text between and including the opening and closing svg tags. Then paste that code into the window of the element panel and make sure "Show Live Preview" below that window is checked.
Example of copied SVG code...
<svg width="75.463px" height="75.463px" viewBox="0 -6.23 75.463 75.463" xmlns="http://www.w3.org/2000/svg">
<g id="Group_85" data-name="Group 85" transform="translate(-34.537 -37)">
<path id="Path_115" data-name="Path 115" d="M98,73.339c0-11.108-12.762-20.113-28.5-20.113A39,39,0,0,0,58.84,54.684a12.562,12.562,0,0,0-16.548.548l5.976,4.687a19.967,19.967,0,0,0-5.817,7.061,2.027,2.027,0,0,1-2.1,1.214H38.167A2.8,2.8,0,0,0,35.6,71.413l1.705,7.67a2.579,2.579,0,0,0,2.365,2.05h1.918A2.681,2.681,0,0,1,43.909,82.2,23.158,23.158,0,0,0,51.12,88.71l-.257,8.184A1.652,1.652,0,0,0,52.452,99h7.362A1.653,1.653,0,0,0,61.4,97.8l1.4-4.913a39.988,39.988,0,0,0,14.748-.258L79.032,97.8A1.653,1.653,0,0,0,80.621,99H88.14a1.652,1.652,0,0,0,1.588-2.106l-.5-9.046C94.63,84.187,98,79.042,98,73.339Z" fill="#ffc2c2" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Path_116" data-name="Path 116" d="M84.124,56.927" fill="#fff" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<circle id="Ellipse_26" data-name="Ellipse 26" cx="2" cy="2" r="2" transform="translate(49 66)" fill="#333"/>
<g id="Group_84" data-name="Group 84">
<circle id="Ellipse_27" data-name="Ellipse 27" cx="16" cy="16" r="16" transform="translate(77 38)" fill="#fff1b6" stroke="#333" stroke-miterlimit="10" stroke-width="2"/>
<g id="Group_83" data-name="Group 83">
<line id="Line_131" data-name="Line 131" y2="21" transform="translate(93 43)" fill="#fff" stroke="#333" stroke-miterlimit="10" stroke-width="2"/>
<g id="Group_82" data-name="Group 82">
<path id="Path_117" data-name="Path 117" d="M93.092,53.5a3.752,3.752,0,1,1,3.875-3.75" fill="none" stroke="#333" stroke-miterlimit="10" stroke-width="2"/>
<path id="Path_118" data-name="Path 118" d="M93.092,53.5a3.752,3.752,0,1,1-3.875,3.75" fill="none" stroke="#333" stroke-miterlimit="10" stroke-width="2"/>
</g>
</g>
</g>
<path id="Path_119" data-name="Path 119" d="M62,59.006A28.446,28.446,0,0,1,78,59.3" fill="none" stroke="#333" stroke-miterlimit="10" stroke-width="2"/>
</g>
</svg>
<g id="Group_85" data-name="Group 85" transform="translate(-34.537 -37)">
<path id="Path_115" data-name="Path 115" d="M98,73.339c0-11.108-12.762-20.113-28.5-20.113A39,39,0,0,0,58.84,54.684a12.562,12.562,0,0,0-16.548.548l5.976,4.687a19.967,19.967,0,0,0-5.817,7.061,2.027,2.027,0,0,1-2.1,1.214H38.167A2.8,2.8,0,0,0,35.6,71.413l1.705,7.67a2.579,2.579,0,0,0,2.365,2.05h1.918A2.681,2.681,0,0,1,43.909,82.2,23.158,23.158,0,0,0,51.12,88.71l-.257,8.184A1.652,1.652,0,0,0,52.452,99h7.362A1.653,1.653,0,0,0,61.4,97.8l1.4-4.913a39.988,39.988,0,0,0,14.748-.258L79.032,97.8A1.653,1.653,0,0,0,80.621,99H88.14a1.652,1.652,0,0,0,1.588-2.106l-.5-9.046C94.63,84.187,98,79.042,98,73.339Z" fill="#ffc2c2" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Path_116" data-name="Path 116" d="M84.124,56.927" fill="#fff" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<circle id="Ellipse_26" data-name="Ellipse 26" cx="2" cy="2" r="2" transform="translate(49 66)" fill="#333"/>
<g id="Group_84" data-name="Group 84">
<circle id="Ellipse_27" data-name="Ellipse 27" cx="16" cy="16" r="16" transform="translate(77 38)" fill="#fff1b6" stroke="#333" stroke-miterlimit="10" stroke-width="2"/>
<g id="Group_83" data-name="Group 83">
<line id="Line_131" data-name="Line 131" y2="21" transform="translate(93 43)" fill="#fff" stroke="#333" stroke-miterlimit="10" stroke-width="2"/>
<g id="Group_82" data-name="Group 82">
<path id="Path_117" data-name="Path 117" d="M93.092,53.5a3.752,3.752,0,1,1,3.875-3.75" fill="none" stroke="#333" stroke-miterlimit="10" stroke-width="2"/>
<path id="Path_118" data-name="Path 118" d="M93.092,53.5a3.752,3.752,0,1,1-3.875,3.75" fill="none" stroke="#333" stroke-miterlimit="10" stroke-width="2"/>
</g>
</g>
</g>
<path id="Path_119" data-name="Path 119" d="M62,59.006A28.446,28.446,0,0,1,78,59.3" fill="none" stroke="#333" stroke-miterlimit="10" stroke-width="2"/>
</g>
</svg>
Inger
Senior Advisor
14,457 posts
Online Now
I don't have any real experience with SVG pictures, but I know of them and I've seen this kind of code before. But wouldn't it be easier to add an image to a page as just an image?
Ha en riktig god dag!
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Wayan Jaya
Registered User
4,806 posts
Online Now
Hi Folks
I believe she doesn't want to import it as an image whether it be SVG,PNG,JPG. WEBP
she wants to import it as a HTML file (in other words so it acts and looks like a normal webpage
I think basically trying to shortcut a way of getting a mockup of a page to be a page without having to do the necessary work. there are converters available to create the HTML, but then no styling/javascript etc
and finally it wouldn't be seen within SD until either previewed locally, or exported.
Zoe if I am mistaken about your intention, then apologies, there are a number of places on the web that can convert SVG to HTML just do a search and take your pick
I believe she doesn't want to import it as an image whether it be SVG,PNG,JPG. WEBP
she wants to import it as a HTML file (in other words so it acts and looks like a normal webpage
I think basically trying to shortcut a way of getting a mockup of a page to be a page without having to do the necessary work. there are converters available to create the HTML, but then no styling/javascript etc
and finally it wouldn't be seen within SD until either previewed locally, or exported.
Zoe if I am mistaken about your intention, then apologies, there are a number of places on the web that can convert SVG to HTML just do a search and take your pick
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?
LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?
LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
Zoe
Guest
74 posts
Wayan Jaya wrote:
Hi Folks
I believe she doesn't want to import it as an image whether it be SVG,PNG,JPG. WEBP
she wants to import it as a HTML file (in other words so it acts and looks like a normal webpage
I think basically trying to shortcut a way of getting a mockup of a page to be a page without having to do the necessary work. there are converters available to create the HTML, but then no styling/javascript etc
and finally it wouldn't be seen within SD until either previewed locally, or exported.
Zoe if I am mistaken about your intention, then apologies, there are a number of places on the web that can convert SVG to HTML just do a search and take your pick
Hi Folks
I believe she doesn't want to import it as an image whether it be SVG,PNG,JPG. WEBP
she wants to import it as a HTML file (in other words so it acts and looks like a normal webpage
I think basically trying to shortcut a way of getting a mockup of a page to be a page without having to do the necessary work. there are converters available to create the HTML, but then no styling/javascript etc
and finally it wouldn't be seen within SD until either previewed locally, or exported.
Zoe if I am mistaken about your intention, then apologies, there are a number of places on the web that can convert SVG to HTML just do a search and take your pick
Yes Wayan, you have it right. I realized at the end of my design, that I spent too much time designing the mockups which are not functional. I have a small window to correct my error. but as of today, I will attempt to remake my mockups in designer using the tools I know so far. I didn't make frameworks while making the mockups, which turned into a bigger problem than I expected.
Cary
Ambassador
1,073 posts
Inger wrote:
I don't have any real experience with SVG pictures, but I know of them and I've seen this kind of code before. But wouldn't it be easier to add an image to a page as just an image?
I don't have any real experience with SVG pictures, but I know of them and I've seen this kind of code before. But wouldn't it be easier to add an image to a page as just an image?
Yes, definitely. Embedding the SVG is usually done so CSS can be used to change the colors in the image.
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.
