Převod SVG do CSS

SVG [Scalable Vector Graphics - škálovatelná vektorová grafika] popisuje dvojrozměrnou vektorovou grafiku pomocí XML. Více najdete v SVG semináři.

Zdrojové SVG (příklad, příklad)

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="32.5 7.5 185 40" xml:space="preserve">
<g>
	<path fill="#E30025" d="M44.087,19.682H34.36c-0.704,0-1.145,0.173-1.305,1.062c0.001-0.007-0.574,2.921-0.574,2.921
		c0.003-0.017-0.115,0.729-0.115,0.729c0,0.317,0.118,1.053,1.209,1.053c0,0,2.408,0,3.321,0
		c-0.253,1.198-4.101,19.391-4.101,19.391c0.004-0.018-0.063,0.685-0.063,0.685c0,0.315,0.118,1.052,1.209,1.052h4.864
		c0.802,0,1.106-0.257,1.252-1.062c-0.002,0.016,5.122-24.04,5.122-24.04c-0.015,0.056,0.063-0.79,0.063-0.79
		C45.243,20.197,44.939,19.682,44.087,19.682z"/>
	<path fill="#E30025" d="M160.116,12.843l0.261-0.686c0-1.767-6.504-3.353-9.575-3.353c-8.616,0-13.968,4.631-13.968,12.086
		c0,5.599,3.831,7.855,6.91,9.668l0.252,0.149c2.366,1.4,4.603,2.724,4.603,5.348c0,4.09-3.437,4.7-5.484,4.7
		c-2.677,0-5.134-1.125-6.453-1.73c-0.719-0.331-1.021-0.464-1.286-0.464c-0.585,0-0.776,0.264-0.966,0.61l-0.069,0.126
		c-0.012,0.018-1.997,3.835-1.997,3.835c-0.006,0.009-0.164,0.292-0.164,0.292l-0.264,0.686c0,1.73,7.053,3.354,10.258,3.354
		c8.698,0,14.545-5.152,14.545-12.818c0-2.938-1.058-5.212-3.233-6.952c-1.391-1.144-2.88-2.025-4.194-2.802
		c-2.569-1.521-4.601-2.722-4.601-5.045c0-2.713,1.973-4.334,5.276-4.334c2.365,0,4.441,1.062,5.682,1.695
		c0.653,0.334,0.979,0.501,1.272,0.501c0.585,0,0.776-0.265,0.966-0.612l0.068-0.126c0.011-0.017,1.998-3.834,1.998-3.834
		C159.956,13.126,160.116,12.843,160.116,12.843z"/>
	<path fill="#E30025" d="M65.272,9.693L54.349,9.699c-0.809,0-1.233,0.17-1.458,1.142c-0.001,0.008-0.733,3.406-0.733,3.406
		c-0.001,0.008-0.027,0.134-0.027,0.134l-0.141,0.92c0,0.948,0.993,0.948,1.417,0.948c0,0,0.293,0,0.734,0
		c-2.025,9.534-6.017,28.327-6.017,28.327c0.005-0.02-0.117,0.895-0.117,0.895c0,0.413,0.171,1.104,1.314,1.104h10.04
		c14.371,0,18.206-15.882,18.206-25.264C77.569,13.601,73.432,9.693,65.272,9.693z M59.781,40.025c0,0-2.033,0-2.902,0
		c0.25-1.192,4.839-22.991,5.006-23.783c0.542,0,1.662,0,1.662,0c3.916,0,5.903,0.865,5.903,5.588
		C69.449,28.125,67.429,40.025,59.781,40.025z"/>
	<path fill="#E30025" d="M108.297,9.693h-4.393c-0.808,0-1.232,0.171-1.456,1.142c-0.002,0.009-3.611,16.952-3.611,16.952
		c-0.2,0.872-0.412,1.998-0.58,3.104c-0.223-0.898-0.496-1.859-0.863-2.861c0.006,0.018-5.59-17.29-5.59-17.29
		c-0.287-0.862-0.543-1.047-1.444-1.047l-6.249,0.007c-0.809,0-1.234,0.17-1.458,1.142c-0.001,0.008-0.733,3.406-0.733,3.406
		c-0.001,0.008-0.027,0.134-0.027,0.134l-0.141,0.92c0,0.948,0.994,0.948,1.417,0.948c0,0,0.331,0,0.818,0
		c-2.026,9.54-6.017,28.327-6.017,28.327c0.004-0.02-0.117,0.895-0.117,0.895c0,0.413,0.171,1.104,1.314,1.104h4.393
		c0.809,0,1.233-0.171,1.457-1.144c0.002-0.008,3.873-18.207,3.873-18.207c0.001-0.005,0.077-0.381,0.077-0.381
		c0.164-0.822,0.33-1.651,0.476-2.442c0.165,0.684,0.352,1.387,0.624,2.201l6.011,18.924c0.221,0.886,0.643,1.048,1.446,1.048h3.399
		c0.932,0,1.155-0.285,1.353-1.143c0.002-0.008,7.217-33.738,7.217-33.738c-0.004,0.018,0.116-0.895,0.116-0.895
		C109.611,10.386,109.439,9.693,108.297,9.693z"/>
	<path fill="#E30025" d="M135.271,9.693l-19.912,0.006c-0.809,0-1.233,0.17-1.458,1.142c-0.001,0.008-0.732,3.406-0.732,3.406
		c-0.001,0.008-0.028,0.134-0.028,0.134L113,15.301c0,0.948,0.993,0.948,1.418,0.948c0,0,0.313,0,0.779,0
		c-2.025,9.534-6.017,28.327-6.017,28.327c0.004-0.02-0.116,0.895-0.116,0.895c0,0.413,0.172,1.104,1.315,1.104h17.361
		c0.81,0,1.232-0.171,1.457-1.144c0.002-0.006,0.733-3.405,0.733-3.405c0.001-0.008,0.028-0.134,0.028-0.134l0.14-0.918
		c0-0.948-0.993-0.948-1.417-0.948c0,0-9.436,0-10.592,0c0.225-1.078,1.822-8.725,1.975-9.453c0.78,0,8.564,0,8.564,0
		c0.882,0,1.232-0.173,1.457-1.143c0.002-0.009,0.758-3.581,0.758-3.581l0.093-0.721c0-0.55-0.39-1.105-1.261-1.105
		c0,0-7.113,0-8.236,0c0.223-1.044,1.507-7.076,1.657-7.78c0.787,0,9.874,0,9.874,0c0.755,0,1.086-0.135,1.557-0.942
		c0.013-0.024,1.789-3.476,1.789-3.476c0.022-0.046,0.139-0.304,0.139-0.304l0.235-0.723C136.689,9.877,136.146,9.693,135.271,9.693
		z"/>
	<path fill="#003872" d="M163.714,37.695c-2.697,0-4.813,2.09-4.813,4.758c0,2.698,2.091,4.813,4.76,4.813
		c2.653,0,4.813-2.158,4.813-4.813C168.475,39.874,166.295,37.695,163.714,37.695z"/>
	<path fill="#003872" d="M43.086,7.784c-2.698,0-4.813,2.091-4.813,4.759c0,2.698,2.092,4.812,4.76,4.812
		c2.652,0,4.812-2.159,4.812-4.812C47.846,9.963,45.666,7.784,43.086,7.784z"/>
	<g>
		<path fill="#E30025" d="M185.793,24.97c1.459,0,2.399,0.291,3.599,1.111c0.2,0.153,0.427,0.302,0.767,0.302
			c0.438,0,0.683-0.197,0.935-0.514c0.037-0.053,2.116-3.458,2.116-3.458c0.026-0.048,0.234-0.747,0.234-0.747
			c0-0.55-0.409-0.797-0.881-1.082c-1.908-1.23-3.997-1.806-6.562-1.806c-3.544,0-6.755,1.147-9.039,3.23
			c-3.665,3.319-5.942,8.971-5.942,14.747c0,6.729,3.793,10.747,10.146,10.747c2.535,0,7.598-1.271,7.598-2.94
			c0,0-0.197-0.732-0.197-0.735c-0.02-0.048-1.312-3.489-1.312-3.489l-0.033-0.05c-0.082-0.123-0.332-0.498-0.807-0.498
			c-0.339,0-0.638,0.099-1.142,0.382c-1.418,0.608-2.27,0.822-3.328,0.822c-2.297,0-3.368-1.163-3.368-3.661
			c0-3.84,1.137-7.817,2.967-10.382C182.481,25.675,183.992,24.97,185.793,24.97z"/>
		<path fill="#E30025" d="M188.562,43.806c0,0,0.003,0.014,0.005,0.021l0.01,0.023L188.562,43.806z"/>
		<path fill="#E30025" d="M215.345,19.667h-16.686c-0.866,0-1.113,0.387-1.246,1.056c0.002-0.01-0.726,3.344-0.726,3.344
			c-0.002,0.01-0.115,0.846-0.115,0.846c0,0.483,0.303,1,1.153,1c0,0,7.005,0,8.904,0c-1.512,1.595-14.641,15.458-14.641,15.458
			l-0.76,3.497c-0.003,0.011-0.117,0.74-0.117,0.74c0,0.486,0.33,1.001,1.259,1.001h18.324c0.798,0,1.382-0.258,1.534-0.761
			c0.066-0.211,0.942-4.201,0.942-4.536c0-0.354-0.157-0.949-1.205-0.949c0,0-8.695,0-10.671,0
			c1.506-1.592,14.381-15.194,14.381-15.194l0.811-3.76c0.009-0.064,0.062-0.641,0.062-0.641c0-0.003,0-0.006,0-0.01
			C216.548,20.392,216.423,19.667,215.345,19.667z"/>
	</g>
</g>
</svg>