Scalable Vector Graphics, or SVGs, are a more modern approach to graphics for the web. Add lightweight, vector graphics to your pages with ease.
Below we've provided a few examples of SVGs, but you can also see SVGs in the movie quotes box on each of the individual documentation pages. These vector images load fast and provide infinite scaling.
SVGs are a great way to load vector images or iconography on your page as the format is very lightweight and can be scaled without losing detail.
Allows you to add a custom label to the top title bar of the tool. This lets you quickly identify what purpose you're using that tool for in your layout. This title is also visible when you've collapsed or hidden the contents of the tool in Edit Mode.
Allows you to add a custom label to the top title bar of the tool. This lets you quickly identify what purpose you're using that tool for in your layout. This title is also visible when you've collapsed or hidden the contents of the tool in Edit Mode.
The Foundry Image tool provides you several different ways to size your images. Below we look at each of them and how they affect your images.
The SVG is scaled to 100% of the width of the parent container, or page. This will allow the SVG to scale past its original size. The SVG will still be scaled down for smaller displays and devices though to match the parent container or page width. This is the most popular option for SVGs since they can scale infinitely without degredation.
Set a maximum width for your SVG in Pixels (px). The image will never scale up beyond this size but the SVG will still be scaled down for smaller displays and devices though if the SVG would exceed the parent container or page width.
Set a maximum width for your SVG in Pixels (px). You're given 6 different values to adjust, allowing you to set the maximum width at each of the responsive breakpoints. The SVG will never scale up beyond these sizes at each breakpoint. The SVG will still be scaled down for smaller displays and devices though if the SVG would exceed the parent container or page width.
Allows the SVG to determine the sizing. This gives you less control over the final sizing of the SVG image.
This setting allows you to align the Image to the left, center or right of its parent container. In Uniform mode this alignment will be set the same for all 6 breakpoints.
Clicking on the small plus icon will give you the ability to adjust the alignment of the Image independently at each of the 6 responsive breakpoints giving you more granular control.
When enabled this will apply a fill to your SVG. This feature cannot override any exisiting fills applied with your SVG's inline code. This is normally used for simple SVGs that don't have a fill applied inline.
Here you can adjust the color of the Fill for the SVG, when enabled above. Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values. You're also provided an option to choose a custom one-off color or a custom gradient as well.
When enabled this will apply a stroke, or border, to your SVG. This feature cannot override any exisiting strokes applied with your SVG's inline code. This is normally used for simple SVGs that don't have a stroke applied inline.
Allows you to adjust the width, or weight, or the stroke when you've enabled this feature, above.
Here you can adjust the color of the Stroke for the SVG, when enabled above. Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values. You're also provided an option to choose a custom one-off color or a custom gradient as well.
Used to add a decorative shadow to this tool. This gives you a custom shadow option where you can create a unique shadow style, setting its positioning, size and color.
Enabling this feature lets you add a link to your SVG.
Allows you to provide a link to a URL, whether it be an internal page or an external link.
This feature allows us to use this tool to trigger the opening of the Foundry Modal. This allows us to decouple the Modal from its trigger, which in this case is an Image, which gives us much greater control over our page's design and layout.
The Unique Modal ID you enter here should match the Unique ID you've setup in the Modal tool's settings. This allows the Image to know which Modal to terigger when your visitor clicks it. This ID links the two page elements together.
Here we can choose between having a simple Tooltip or a more advanced Popover added to your SVG. These elements appear when the visitor hovers over the SVG. By default we have the Type set to None, which turns off this feature.
Be sure that you've enabled Tooltips and Popovers in the Control Center's "Additional Elements" section. Doing this loads the appropriate javascript for these items. Not loading this javascript by default saves us from loading code on the page that we may not need.
Enabling this feature adds an HTML comment to the exported code to indicate the name of the tool being used here. This is helpful to both yourself and others when troubleshooting, or inspecting the code. This is enabled by default.
This field allows you to replace the default HTML Comment with your own text.
Allows you to specify an options class, or classes, that will be added to this tool's wrapper. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.