# SVG

Here you will see the default name/title of the Edit option you are working on. You can decide to leave at that or rename it.

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-c55af63a609d2aa4efc2a85fe00ab2d73d779e00%2FElement%20-%20SVG%20-%20Align.png?alt=media)

You can move your text in different positions as you deem fit, you can position it to the Left, Center, Right, or as Justified.

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-c55af63a609d2aa4efc2a85fe00ab2d73d779e00%2FElement%20-%20SVG%20-%20Align.png?alt=media)

There are two spacing options available for adjusting your content. Depending on the Edit option you are working on, the settings will only be applicable to that option.

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-61e1ce805f4118e99f2aaa74a9ffe54ffa8bde4d%2FElement%20-%20SVG%20-%20Spacing%20Option.png?alt=media)

* You can adjust the top or bottom margin of your content by toggling its bars.

You can type an SVG URL here to display it in your page.

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-0428fcab04556a690c9e2bb027a5f499535dca73%2FElement%20-%20SVG%20-%20SVG%20URL.png?alt=media)

When you click on the "Open SVG Editor" it opens the SVG Editor's page. You can edit each SVG color under "Editor" and you can replace the SVG by inputting the code in the "Raw Editor" section.

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-0cf684d5ebd8942736d997b0a90abfbc58e5d6da%2FElement%20-%20SVG%20-%20Open%20SVG%20editor.png?alt=media)

You can adjust the height and width of your map by inputting the size number you want.

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-103f3a6e34e58c49a67152a7105846af0b21ce11%2FElement%20-%20SVG%20-%20H%26W.png?alt=media)

You can select either the "Open the popup" or the "go-to website URL"

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-09054cbdbb3a9ca1d95f2460a83fc6c35fb2da62%2FElement%20-%20SVG%20-%20button%20acton.png?alt=media)

* When you select "Go to website URL" in the "Image Action" icon, it will require you to select which website page you will be settings.
* If you want the website to direct visitors to a new tab when they perform an action, simply toggle it on.

You can decide if you want this particular Edit option to be visible on only mobile devices, desktops, or both by clicking on it to highlight the icon.

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-592153f9a9ac386fc4a2e71920acb052aef30f8f%2FElement%20-%20SVG%20-%20Visibilty.png?alt=media)

Input your custom class here.

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-dda05813091e30e651b1f56fec4bb6b956335c1d%2FElement%20-%20SVG%20-%20Customm%20Class.png?alt=media)

If you need to copy the Custom CSS, just click on the "Copy" icon on the right side of the reference code.

![](https://3652255517-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSpDxRsrRdNpxcuWtIMiA%2Fuploads%2Fgit-blob-a9b851ba8b55be8c8dc94f25204aa726a594f390%2FElement%20-%20SVG%20-%20CSS%20Selector.png?alt=media)
