SVG Cant Not Preview

SVG Cant Run On Bootstrap studio . but on preview is normal ... enter image description here

enter image description here

Thank you for this report! This is a known limitation of the program - SVGs can have embedded JS in them and for security we clean up the code when displaying it in the application. Previewing and Exporting will include your code exactly as it was written.

A workaround is to import the SVG as a regular image, and place it as a background using the background-image CSS property.

I am sorry but I really don't get this. This is becoming a popular website design technique to use multiple svg as spacers or separators between sections to break up the monotonous look of the simple block look design of the past. As it is now, you have to add a svg as a image instead of a inline svg which greatly reduces your design freedom when targeting the svg styles. Change a background color and you have to go back and edit the svg spacer. What ??? thats not cool.

I mean if a script can be put in a imported svg that we can use, it almost seems safer to be able to see the code in the inline svg and determine if there is scripting.

Please allow the use of inline svg.

A third option instead of importing the svg as a image to use as a html or css background image would be to encode the svg as a encoded url using a svg url encoder. Then use it as a css background image (like the url svg's in Bootstrap css are) which will allow you to see and also edit the fill color inside Bootstrap Studio. This also keeps the html code from being colossal and stores the image in the css stylesheet. Gives me the design freedom for now to change tcolor of dividers or spacer or other things on the fly. Still wish to animate the svg and for that....well we have made the request to stop restrictions on svg please.

A shape like the one pictured could easily be created with CSS. Faster and no need for any files at all.

This is a pretty slick little free online svg generator for making wave transitions between sections.

Pure CSS (no SVG) solution that displays fine in BSS...

#wave-container { width: 100%; height: 100px; overflow: hidden; }

#wave { display: block; position: relative; height: 40px; background: rgb(0,117,255); }

#wave:before { content: ""; display: block; position: absolute; border-radius: 100%; width: 100%; height: 300px; background-color: white; right: -25%; top: 20px; }

#wave:after { content: ""; display: block; position: absolute; border-radius: 100%; width: 100%; height: 300px; background-color: rgb(0,117,255); left: -25%; top: -240px; }

Then add two divs and set IDs...

<div id="wavecontainer">

<div id="wave">


Hey, thanks for showing me that code. It seems like a better way to position my url-encoded svgs using the :before and :after. Nice !


So I found a solution that will let you use a svg shape as a html image and still be able to see it in Bootstrap Studio and edit the color of the fill.

First add a image component. On the image component add a src attribute. Convert your svg image using to get the "ready to use css" option. Copy only what in the quotes from that option like data:image/svg+xml,%3Csvg fill='rgb(24,163,163)' etc etc..... (I also always use preserveAspectRatio="none" instead of height and width in the SVG code).

Paste that into the src attribute value. Now the image SVG shows up in Bootstrap Studio. You can change the fill color. Using rgb is probably better than Hex as this is encoded information. If you want to use Hex you would use %23 instead of # as it will not understand a # sign.

So now I can start saving SVG shape images as components to my library. I also am finalizing a component that I drop the image into that will allow me to flip, adjust offsets, and scales etc to give me multiple options to choose from based on classes I use.

Seems to work in all browers that I tested including IE 10 11 so no fallback code.