SVG Images

[sofos]

Hi everyone,

I've created a SVG logo. How can I upload it on IPS?

I've created a block with WYSIWYG Editor but when I upload image the .svg extension is not allowed.

How can I use this extension?

Want to adopt it because it's the best extension also when users try to zoom on images.

Thanks in advance!!

[Joel R]

Make sure you allow the svg extension in your settings ...

[The Old Man]

As Joe says, AdminCP > Settings > Posting > Allowed File Extensions > Add .svg to the list.

 

[Nathan Explosion]

SVG is one of the allowed extensions if you use "All file types" with no restrictions for your 'Allowed file types'.

If you use "All files" but with restrictions, then you need to allow svg as per Joel's comment - got to System -> Settings -> Posting to configure

If you use "Images only" then you cannot upload svg as it is not in the listing of allowed image extensions.

If you use "None" then you cannot upload in general.

[sofos]

First of all thanks for answers.

I've tried your method but it will upload the image such as a file and not like an image view.

 

[opentype]

SVG is not a normal (i.e. bitmap) image format like GIF/JPG/PNG and won’t behave like those formats. I do use SVG images myself for my site logos, but I manually coded the template for it with fallback bitmap images. You might consider just to use a regular image format. 

[The Old Man]

Yes, it's basically a block of code telling the program in this case a browser what to do. 

https://www.w3schools.com/graphics/svg_inhtml.asp

Here's what basically happens if you try to upload an .svg file into a WYSIWYG block, you effectively get a hyperlink to the file, but when you click on it you can view the file in a modern browser.

 

However, like adding the code to a template, you could copy and pate the code itself into a block if you have temporarily enabled Admin group to be able to post Html: 

1. Create a WYSIWYG block.
2. Enter Source mode to edit the HTML directly. 
3. Paste your HTML code. 

   <svg width="100" height="100">
     <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
   </svg>

    

4. Exit source mode and you will see the resulting generated image:

5. Save the block and exit the Page editor to see the image.

 

 

 

 

 

[sofos]

So I have this image in .svg : vhf4.svg

How can I implement it in WYSIWYG block?

[Nathan Explosion]

5 minutes ago, sofos said:

So I have this image in .svg : vhf4.svg

How can I implement it in WYSIWYG block?

Have you tried the steps from the above post yet?

[sofos]

1 minute ago, Nathan Explosion said:

Exactly as described above your post....

Yes but you have created it from 0.I want to know how can implement and already created image.

Thanks in advance!

[Nathan Explosion]

Just now, sofos said:

Yes but you have created it from 0.I want to know how can implement and already created image.

Thanks in advance!

An SVG is just a text file....open it in Notepad and you'll see the code that you need to use which matches up to the instructions given.

<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="580.000000pt" height="162.000000pt" viewBox="0 0 580.000000 162.000000"
 preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.15, written by Peter Selinger 2001-2017
</metadata>
<g transform="translate(0.000000,162.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M469 1403 c-65 -32 -156 -122 -187 -185 -45 -92 -67 -273 -41 -347
16 -46 29 -38 29 19 0 207 150 490 258 490 34 0 88 -58 102 -111 9 -30 11 -89
7 -184 -6 -149 -37 -319 -102 -574 -19 -74 -33 -136 -31 -139 3 -2 28 3 57 12
29 8 54 14 56 13 1 -1 -11 -24 -28 -50 -16 -26 -29 -54 -29 -62 0 -36 31 -9
79 70 59 97 280 393 402 540 248 297 457 465 600 482 55 7 60 15 24 39 -33 21
-111 12 -185 -22 -167 -77 -405 -325 -652 -681 -51 -73 -94 -131 -96 -129 -2
2 4 30 12 62 32 126 49 261 50 404 1 159 -14 232 -60 302 -52 80 -163 101
-265 51z"/>
<path d="M4564 1333 c-89 -125 -208 -309 -318 -492 -47 -79 -86 -135 -86 -124
0 63 -119 120 -313 151 l-48 7 90 132 c50 73 111 160 136 194 49 66 55 89 26
89 -27 0 -68 -50 -198 -246 l-116 -174 -61 0 c-157 0 -373 -54 -463 -115 -79
-53 -122 -139 -103 -205 11 -37 56 -90 77 -90 17 0 17 15 -2 30 -37 31 -1 97
78 143 23 14 79 36 123 50 81 26 254 60 262 53 2 -2 -25 -51 -59 -108 -143
-236 -228 -428 -190 -428 6 0 42 62 81 138 39 75 108 198 153 272 l82 135 165
0 c175 -1 242 -12 259 -44 8 -14 -3 -44 -49 -136 -57 -111 -77 -185 -50 -185
5 0 30 42 54 93 93 192 314 553 487 794 105 146 113 163 77 163 -20 0 -39 -19
-94 -97z"/>
<path d="M5164 1196 c-89 -29 -169 -107 -258 -255 -27 -45 -45 -61 -76 -74
-55 -21 -73 -79 -38 -123 10 -13 -17 -84 -33 -84 -6 0 -47 -29 -92 -65 -96
-77 -176 -121 -202 -112 -14 6 -17 15 -13 45 8 57 63 181 107 239 22 28 37 54
34 57 -4 3 -23 6 -44 6 -44 0 -65 -16 -201 -149 -49 -47 -88 -91 -88 -98 0
-17 6 -16 35 3 l25 16 -15 -28 c-23 -45 -19 -101 9 -129 68 -67 199 -25 367
118 l76 65 -20 -61 c-28 -87 -29 -200 -1 -247 22 -37 65 -58 48 -24 -5 11 -9
48 -8 84 1 80 49 213 119 330 46 75 51 80 91 86 45 6 113 2 152 -11 18 -6 22
-4 22 13 0 29 -58 71 -109 80 l-42 7 54 65 c65 79 130 137 174 156 72 31 161
8 178 -46 9 -28 25 -25 25 4 0 35 -41 88 -88 114 -51 29 -133 36 -188 18z"/>
<path d="M2104 1162 c-35 -22 -95 -109 -179 -258 l-56 -102 -25 25 c-24 23
-30 25 -112 21 -128 -5 -174 -30 -325 -175 -123 -118 -234 -196 -272 -191 -16
3 -20 10 -19 43 1 53 54 177 103 242 22 28 37 54 34 57 -4 3 -23 6 -44 6 -44
0 -65 -16 -201 -149 -49 -47 -88 -91 -88 -98 0 -17 6 -16 35 3 l25 16 -15 -28
c-19 -37 -19 -94 0 -121 20 -29 78 -47 123 -38 49 9 154 66 221 121 29 24 57
44 62 44 5 0 9 -21 9 -46 0 -94 48 -144 139 -144 72 0 112 20 187 92 l65 62
-8 -44 c-14 -82 -9 -157 13 -187 28 -37 50 -44 39 -12 -5 13 -9 51 -9 84 1
146 178 448 400 685 65 68 72 79 58 91 -27 22 -124 23 -160 1z m-279 -362 c3
-6 0 -26 -7 -46 -10 -27 -10 -37 0 -43 36 -22 -104 -193 -198 -241 -51 -26
-66 -25 -86 5 -44 68 54 233 181 306 51 29 99 37 110 19z"/>
<path d="M1280 991 c-32 -31 -40 -77 -18 -99 34 -34 109 5 124 64 9 36 -6 58
-45 62 -24 3 -38 -4 -61 -27z"/>
<path d="M4620 991 c-32 -31 -40 -77 -18 -99 34 -34 109 5 124 64 9 36 -6 58
-45 62 -24 3 -38 -4 -61 -27z"/>
<path d="M5420 991 c-32 -31 -40 -77 -18 -99 34 -34 109 5 124 64 9 36 -6 58
-45 62 -24 3 -38 -4 -61 -27z"/>
<path d="M2735 831 c-41 -19 -95 -62 -170 -132 -164 -156 -306 -249 -377 -249
-40 0 -68 32 -68 78 0 119 191 304 270 262 67 -36 -49 -139 -175 -157 -70 -9
-55 -27 19 -21 74 6 175 54 207 99 23 33 25 92 3 113 -22 23 -55 29 -137 24
-168 -9 -321 -139 -334 -286 -7 -78 13 -117 74 -144 97 -43 244 0 382 111 35
28 64 51 65 51 1 0 0 -29 -2 -64 -4 -59 -2 -67 21 -90 22 -22 35 -26 79 -26
29 1 78 10 108 21 30 11 80 25 110 30 70 12 160 56 233 115 52 42 73 74 47 74
-6 0 -35 -20 -66 -45 -48 -40 -142 -95 -160 -95 -3 0 12 19 35 42 117 116 134
256 37 302 -54 25 -131 21 -201 -13z m159 -51 c14 -5 33 -21 42 -35 14 -22 15
-32 5 -64 l-11 -38 -49 5 c-39 3 -57 0 -85 -17 -48 -30 -79 -83 -74 -126 4
-32 1 -36 -30 -46 -38 -12 -86 2 -96 28 -9 21 11 90 40 139 34 60 118 131 173
148 57 18 55 18 85 6z"/>
<path d="M5273 798 c-73 -61 -213 -203 -213 -215 0 -17 6 -16 35 3 l25 16 -15
-28 c-19 -37 -19 -94 0 -121 20 -29 77 -46 123 -38 55 9 160 70 256 150 79 65
102 95 75 95 -6 0 -47 -29 -92 -65 -96 -77 -176 -121 -202 -112 -14 6 -17 15
-13 45 8 57 63 181 107 239 22 28 37 54 34 57 -4 3 -23 6 -44 6 -28 0 -48 -8
-76 -32z"/>
</g>
</svg>

[sofos]

7 minutes ago, Nathan Explosion said:

An SVG is just a text file....open it in Notepad and you'll see the code that you need to use which matches up to the instructions given.

<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="580.000000pt" height="162.000000pt" viewBox="0 0 580.000000 162.000000"
 preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.15, written by Peter Selinger 2001-2017
</metadata>
<g transform="translate(0.000000,162.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M469 1403 c-65 -32 -156 -122 -187 -185 -45 -92 -67 -273 -41 -347
16 -46 29 -38 29 19 0 207 150 490 258 490 34 0 88 -58 102 -111 9 -30 11 -89
7 -184 -6 -149 -37 -319 -102 -574 -19 -74 -33 -136 -31 -139 3 -2 28 3 57 12
29 8 54 14 56 13 1 -1 -11 -24 -28 -50 -16 -26 -29 -54 -29 -62 0 -36 31 -9
79 70 59 97 280 393 402 540 248 297 457 465 600 482 55 7 60 15 24 39 -33 21
-111 12 -185 -22 -167 -77 -405 -325 -652 -681 -51 -73 -94 -131 -96 -129 -2
2 4 30 12 62 32 126 49 261 50 404 1 159 -14 232 -60 302 -52 80 -163 101
-265 51z"/>
<path d="M4564 1333 c-89 -125 -208 -309 -318 -492 -47 -79 -86 -135 -86 -124
0 63 -119 120 -313 151 l-48 7 90 132 c50 73 111 160 136 194 49 66 55 89 26
89 -27 0 -68 -50 -198 -246 l-116 -174 -61 0 c-157 0 -373 -54 -463 -115 -79
-53 -122 -139 -103 -205 11 -37 56 -90 77 -90 17 0 17 15 -2 30 -37 31 -1 97
78 143 23 14 79 36 123 50 81 26 254 60 262 53 2 -2 -25 -51 -59 -108 -143
-236 -228 -428 -190 -428 6 0 42 62 81 138 39 75 108 198 153 272 l82 135 165
0 c175 -1 242 -12 259 -44 8 -14 -3 -44 -49 -136 -57 -111 -77 -185 -50 -185
5 0 30 42 54 93 93 192 314 553 487 794 105 146 113 163 77 163 -20 0 -39 -19
-94 -97z"/>
<path d="M5164 1196 c-89 -29 -169 -107 -258 -255 -27 -45 -45 -61 -76 -74
-55 -21 -73 -79 -38 -123 10 -13 -17 -84 -33 -84 -6 0 -47 -29 -92 -65 -96
-77 -176 -121 -202 -112 -14 6 -17 15 -13 45 8 57 63 181 107 239 22 28 37 54
34 57 -4 3 -23 6 -44 6 -44 0 -65 -16 -201 -149 -49 -47 -88 -91 -88 -98 0
-17 6 -16 35 3 l25 16 -15 -28 c-23 -45 -19 -101 9 -129 68 -67 199 -25 367
118 l76 65 -20 -61 c-28 -87 -29 -200 -1 -247 22 -37 65 -58 48 -24 -5 11 -9
48 -8 84 1 80 49 213 119 330 46 75 51 80 91 86 45 6 113 2 152 -11 18 -6 22
-4 22 13 0 29 -58 71 -109 80 l-42 7 54 65 c65 79 130 137 174 156 72 31 161
8 178 -46 9 -28 25 -25 25 4 0 35 -41 88 -88 114 -51 29 -133 36 -188 18z"/>
<path d="M2104 1162 c-35 -22 -95 -109 -179 -258 l-56 -102 -25 25 c-24 23
-30 25 -112 21 -128 -5 -174 -30 -325 -175 -123 -118 -234 -196 -272 -191 -16
3 -20 10 -19 43 1 53 54 177 103 242 22 28 37 54 34 57 -4 3 -23 6 -44 6 -44
0 -65 -16 -201 -149 -49 -47 -88 -91 -88 -98 0 -17 6 -16 35 3 l25 16 -15 -28
c-19 -37 -19 -94 0 -121 20 -29 78 -47 123 -38 49 9 154 66 221 121 29 24 57
44 62 44 5 0 9 -21 9 -46 0 -94 48 -144 139 -144 72 0 112 20 187 92 l65 62
-8 -44 c-14 -82 -9 -157 13 -187 28 -37 50 -44 39 -12 -5 13 -9 51 -9 84 1
146 178 448 400 685 65 68 72 79 58 91 -27 22 -124 23 -160 1z m-279 -362 c3
-6 0 -26 -7 -46 -10 -27 -10 -37 0 -43 36 -22 -104 -193 -198 -241 -51 -26
-66 -25 -86 5 -44 68 54 233 181 306 51 29 99 37 110 19z"/>
<path d="M1280 991 c-32 -31 -40 -77 -18 -99 34 -34 109 5 124 64 9 36 -6 58
-45 62 -24 3 -38 -4 -61 -27z"/>
<path d="M4620 991 c-32 -31 -40 -77 -18 -99 34 -34 109 5 124 64 9 36 -6 58
-45 62 -24 3 -38 -4 -61 -27z"/>
<path d="M5420 991 c-32 -31 -40 -77 -18 -99 34 -34 109 5 124 64 9 36 -6 58
-45 62 -24 3 -38 -4 -61 -27z"/>
<path d="M2735 831 c-41 -19 -95 -62 -170 -132 -164 -156 -306 -249 -377 -249
-40 0 -68 32 -68 78 0 119 191 304 270 262 67 -36 -49 -139 -175 -157 -70 -9
-55 -27 19 -21 74 6 175 54 207 99 23 33 25 92 3 113 -22 23 -55 29 -137 24
-168 -9 -321 -139 -334 -286 -7 -78 13 -117 74 -144 97 -43 244 0 382 111 35
28 64 51 65 51 1 0 0 -29 -2 -64 -4 -59 -2 -67 21 -90 22 -22 35 -26 79 -26
29 1 78 10 108 21 30 11 80 25 110 30 70 12 160 56 233 115 52 42 73 74 47 74
-6 0 -35 -20 -66 -45 -48 -40 -142 -95 -160 -95 -3 0 12 19 35 42 117 116 134
256 37 302 -54 25 -131 21 -201 -13z m159 -51 c14 -5 33 -21 42 -35 14 -22 15
-32 5 -64 l-11 -38 -49 5 c-39 3 -57 0 -85 -17 -48 -30 -79 -83 -74 -126 4
-32 1 -36 -30 -46 -38 -12 -86 2 -96 28 -9 21 11 90 40 139 34 60 118 131 173
148 57 18 55 18 85 6z"/>
<path d="M5273 798 c-73 -61 -213 -203 -213 -215 0 -17 6 -16 35 3 l25 16 -15
-28 c-19 -37 -19 -94 0 -121 20 -29 77 -46 123 -38 55 9 160 70 256 150 79 65
102 95 75 95 -6 0 -47 -29 -92 -65 -96 -77 -176 -121 -202 -112 -14 6 -17 15
-13 45 8 57 63 181 107 239 22 28 37 54 34 57 -4 3 -23 6 -44 6 -28 0 -48 -8
-76 -32z"/>
</g>
</svg>

Hmm ok thanks.

But i don't find the "Source Mode" button.

[Nathan Explosion]

Just now, sofos said:

But i don't find the "Source Mode" button.

Then you need to enable "Can post HTML?" in your group settings.

[sudo]

22 hours ago, Nathan Explosion said:

Then you need to enable "Can post HTML?" in your group settings.

Just dont let normal users do that, it can have HUGE security implications.