SVG Markers Icons

This topic contains 11 replies, has 3 voices, and was last updated by  Kiran 5 years ago.

We have moved to a support ticketing system and our forums are now closed.

Open Support Ticket
  • Author
    Posts
  • April 29, 2019 at 1:57 am #483354

    Brigitte
    Full Member
    Post count: 235

    Hello,

    As we are in 2019, I want to use SVG icons for markers of different categories of places.

    Icons display correctly on categories (35x35px), but not on the map where they are too big (150x150px).

    How fix that please? CSS ? Code modification ?
    Thanks.

    April 29, 2019 at 1:58 am #483355

    Brigitte
    Full Member
    Post count: 235
    This reply has been marked as private.
    April 29, 2019 at 6:14 am #483370

    Kor
    Moderator
    Post count: 16516

    Hi Adrien,

    Thanks for your post. Unfortunately, there isn’t a way to resize an SVG icon/marker and we would recommend switching it to PNG/JPG. Also, map icons are displayed full size so kindly upload images that have a size. Recommended size is max 38w*50h .

    April 29, 2019 at 11:04 am #483414

    Brigitte
    Full Member
    Post count: 235

    But SVG is the future! 🙂
    We live in the era of responsive technology and flat design!

    Yes I know that the functionality does not exist today, that’s why I’m asking you a very simple question:

    Which core file should I modify to just add a class to the IMG tag of the map marker. I do not need anything else.

    Thank you.

    April 29, 2019 at 1:19 pm #483445

    Kor
    Moderator
    Post count: 16516

    Hi Adrien,

    Thanks for your reply. I will forward this to a developer.

    Thanks!

    April 29, 2019 at 2:12 pm #483452

    Kiran
    Moderator
    Post count: 7069
    This reply has been marked as private.
    April 29, 2019 at 2:25 pm #483463

    Brigitte
    Full Member
    Post count: 235

    Maybe a solution?
    The famous “SVG Support” plugin offers an intersting option:

    For advanced use: Enable the « Advanced Mode » under Settings > SVG Support.

    With advanced mode enabled, you can embed your SVG images just like you would a standard image with the addition of adding (in text view) the class “style-svg” (or the custom class you defined) to your IMG tags that you want this plugin to swap out with your actual SVG code.

    For example:

    img class=style-svg alt=alt-text src=image-source.svg
    or
    img class=your-custom-class alt=alt-text src=image-source.svg

    The whole IMG tag element will now be dynamically replaced by the actual code of your SVG, making the inner content targetable.
    This allows you to target elements within your SVG using CSS and JS.

    You can remove all other attributes from the IMG tag as it will disappear anyway.

    There’s a setting to automatically add your class to the IMG tag for you when you’re inserting SVG’s in to a post or page, which also removes unnecessary tags.
    Since 2.3.11, you can force all SVG files to be rendered inline with a single checkbox. Additionally, you can now choose whether to use the minified or expanded version of the JS file.

    This plugin can automatically add a CSS class to each added SVG in the media library. But unfortunately this option does not work on my site currently. I can ask the question to their support if you want.

    But you may have a better alternative?

    April 29, 2019 at 2:28 pm #483465

    Brigitte
    Full Member
    Post count: 235
    This reply has been marked as private.
    April 29, 2019 at 2:30 pm #483467

    Brigitte
    Full Member
    Post count: 235

    Maybe a solution?
    The famous “SVG Support” plugin offers an intersting option:

    For advanced use: Enable the « Advanced Mode » under Settings > SVG Support.

    With advanced mode enabled, you can embed your SVG images just like you would a standard image with the addition of adding (in text view) the class “style-svg” (or the custom class you defined) to your IMG tags that you want this plugin to swap out with your actual SVG code.

    For example:

    img class=style-svg alt=alt-text src=image-source.svg
    or
    img class=your-custom-class alt=alt-text src=image-source.svg

    The whole IMG tag element will now be dynamically replaced by the actual code of your SVG, making the inner content targetable.
    This allows you to target elements within your SVG using CSS and JS.

    You can remove all other attributes from the IMG tag as it will disappear anyway.

    There’s a setting to automatically add your class to the IMG tag for you when you’re inserting SVG’s in to a post or page, which also removes unnecessary tags.
    Since 2.3.11, you can force all SVG files to be rendered inline with a single checkbox. Additionally, you can now choose whether to use the minified or expanded version of the JS file.

    This plugin can automatically add a CSS class to each added SVG in the media library. But unfortunately this option does not work on my site currently. I can ask the question to their support if you want.

    But you may have a better alternative?

    April 30, 2019 at 5:54 am #483620

    Kiran
    Moderator
    Post count: 7069

    Hello Adrien,

    Google generates dynamic position of the marker based on its size. So changing marker size via css may affect marker position on the map.

    We recommended to use marker icon max size of 50px, lower marker size helps to load markers faster when there are more markers to load on map.

    You can adjust marker size on map via following css, but as i said it may affect marker position on the map.

    

    .geodir-map-canvas .gm-style div div div img[src$=".svg"] {
	width: 45px !important;
	height: auto !important;
	max-width: 45px !important;
	max-height: 45px !important;
}
    

    Let us know.
    

    Thanks,
    
Kiran
    

		
	
    


    

			
				

    

	
    

		April 30, 2019 at 9:00 am

		
		#483634

		
		
		
	
    


    


    

	
    

		
		
    Brigitte
    Full Member
    
		
		
     Post count: 235
    
	
    

	
    

		
		
    Hello Kiran,
    

    Thank you very much for your help. Unfortunately yes you’re right it moves the icon SVG.
    

    But I found a better solution that I share here: you have to specify the size of the .SVG in the file itself!
    

    For example, replace:
    

    <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 56.673 56.673" style="enable-background:new 0 0 56.673 56.673;" xml:space="preserve">
    

    by
    

    <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" height="45px" width="45px" viewBox="0 0 56.673 56.673" style="enable-background:new 0 0 56.673 56.673;" xml:space="preserve">
    

    Now the icon is placed correctly on the map, and especially Firefox and Internet Explorer DISPLAY the icon. Without specifying the size in the .svg file, the icon did not appear on Firefox for example 😉
    

    Thanks again for your help Kiran, I did not know the CSS code you told me, it could be useful for other things 😉
    

		
	
    


    

			
				

    

	
    

		April 30, 2019 at 9:50 am

		
		#483641

		
		
		
	
    


    


    

	
    

		
		
    Kiran
    Moderator
    
		
		
     Post count: 7069
    
	
    

	
    

		
		This reply has been marked as private.
		
	
    


    

			
		
	
    • 

	
  • 

		
    Author
    

		
    

			
				Posts
			
		
    

	
    • 





			



	


		Viewing 12 posts - 1 through 12 (of 12 total)
	


	


		
	





		
				

			

				

					
We have moved to a support ticketing system and our forums are now closed.

					Open Support Ticket