Skip to main content
bernadettewnek
bernadettewnek
Known Participant
November 5, 2019
Answered

Using SVG as Buttons

  • November 5, 2019
  • 1 reply
  • 982 views

Hi Everyone,

I am creating a non-responsive, scalable project in Cp 2019 (v11).

I am using images as buttons.

Client sent me a PPT with images and I did a right click on each image and saved each as an SVG. (He wants to use SVGs because this is something that will be going up on the web and quality is better.)

Everything looked fine as I was working in Cp and when I previewed in HTML5. What I saw in the output was not what I expected. (I have screenshots below.)

I researched and played around with images and settings and I think the cause of what I am seeing might have to do with saving images as SVGs, but I'm still not sure how that is causing the issues I'm experiencing or how to resolve it. Sidenote - I really don't have any experience with using or creating SVGs.

 

This is what I'm seeing as I work in Captivate: All Good

(Note - The resizing happened within Captivate in the Properties panel)

 

This is what I see when I preview in HTML5: All Good

This is what I see when I publish the project:

See button in bottom right corner. It's like it wants to display at the original size, but it's only showing the amount of the resize. I've tried selecting and deselecting the option of "Fit to Bounding Box" and get the same result.

 

Does anyone know why this is happening or how to resolve it?

Thanks,

Bernadette

This topic has been closed for replies.
Correct answer Lilybiri

Sorry but I edited the title because it has wrong terminology: Image buttons are on of the three old-style buttons, they never can be filled with SVGs. Only in 11.5 is it possible to use SVGs directly as buttons.

 

Strange images to be used as buttons. I suspect the workflow, MS has never been very good with handling images. Save the image as a bitmap image and convert it to a SVG with a better application. I always use Illustrator for that purpose.

I don't know how you resized the SVG in Captivate.  Have a lot of examples where I use SVGs as buttons, and I did resize them. You never define both width/height, but only one of them since the ratio width/height is always fixed.

 

Here are some examples of SVGs used as buttons:

http://blog.lilybiri.com/svgs-for-color-based-quiz

http://blog.lilybiri.com/sequence-check-slides-updated-version

 

Overview of all types of buttons in 11.5:

http://blog.lilybiri.com/overvew-6-button-types

1 reply

Lilybiri
LilybiriCorrect answer
Legend
November 5, 2019

Sorry but I edited the title because it has wrong terminology: Image buttons are on of the three old-style buttons, they never can be filled with SVGs. Only in 11.5 is it possible to use SVGs directly as buttons.

 

Strange images to be used as buttons. I suspect the workflow, MS has never been very good with handling images. Save the image as a bitmap image and convert it to a SVG with a better application. I always use Illustrator for that purpose.

I don't know how you resized the SVG in Captivate.  Have a lot of examples where I use SVGs as buttons, and I did resize them. You never define both width/height, but only one of them since the ratio width/height is always fixed.

 

Here are some examples of SVGs used as buttons:

http://blog.lilybiri.com/svgs-for-color-based-quiz

http://blog.lilybiri.com/sequence-check-slides-updated-version

 

Overview of all types of buttons in 11.5:

http://blog.lilybiri.com/overvew-6-button-types

bernadettewnek
bernadettewnekAuthor
Known Participant
November 5, 2019

Thanks for chaning the title. I'm grateful for getting educated in the proper use of the terms used for Captivate or ID in general. 🙂

 

In terms of the images in my example, those aren't the real images I'll be using. I just pulled some sample SVGs in order to display the issue I was having. The difference between using original SVGs and doing "Save As" SVGs, if that makes sense.

I don't have Illustrator, but I'm sure there is something free out there I can use.

 

Here is a step by step of what I did. Can you replicate?

1. Received ppt with some images.

2. Right click on an image and select "Save as Picture"

3. On the dialog box, edit the "Save as Type" to SVG.

4. Open/Create a non-responsive project in Captivate.

5. From the ribbon at the top, select Media > SVG and select the image you saved earlier.

6. Expand the Properties panel for the image and select Options.

7. Keeping "Constrain Proportions" selected, edit the width to something smaller (the height will automatically change).

8. From the ribbon at the top, select Publish and select the Output Format of HTML5 and select Scalable HTML content.

9. Extract the files and click index.html to run.

10. What does that image look like?

 

Note - Actually I would even say edit the title of this conversation to just "Using SVGs" because it doesn't even matter if you are using it as a button. This is happening to any image that I "Saved As" an SVG and then edited the size in Cp.

 

I'll try your suggestion about saving as bitmap and then SVG and see if that works.

 

Thanks!

Bernadette

Lilybiri
Lilybiri
Legend
November 5, 2019

Captivate is not using MS interface, has no ribbon at all. The Big Button Bar is fixed, doesn't adapt to the selected item or workflow.

Constrain proportions has no use, that is only for bitmap images. IMO it should be dimmed, SVG always keeps ration width/height. Drag any handle on the bounding box of the SVG and you'll see that it is true.

My first suspicion is indeed 'Save as SVG' from MS which I never trust with images.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices