Karayel Tasarım SVG Canvas Logo

Logo sayesinde renkler photoshop olmadan sadece fill değerleri değiştirlerek istenildiği gibi reklendirilebilr. Amacım ileride HTTPS üzerinden iframe ile çağırırken, iframe için yazılacak data-karayel-renk gibi bir attribute ile logoyu istenildiği gibi renklendirebilmek.İlla ki iframe olmak zorunda değil. Eğer dışarıdan gelen SVG'nin rengine içeride müdahele edebilirsem ihtiyaç duyulmaz böyl bir şeye. Yerel SVGyi CSS ile renklendirmeyi Seret sitesinde zaten yapmıştım. Şu anki uygulama buraya ve denemek amacıyla İncesu sitesine konuldu.

Örnekler:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="161px" height="24px" viewBox="0 0 161 24" enable-background="new 0 0 161 24" xml:space="preserve">
<path fill-rule="evenodd" clip-rule="evenodd" fill="#185FA3" d="M19.229,0.106c0.389,0.07,0.776,0.143,1.166,0.209
c1.177,0.198,2.313,0.535,3.408,1.009c0.762,0.33,1.479,0.735,2.141,1.236c0.488,0.37,0.887,0.829,1.123,1.398
c0.387,0.934,0.117,1.759-0.498,2.495c-0.701,0.838-1.664,1.286-2.638,1.707c-1.374,0.593-2.808,0.993-4.274,1.269
c-1,0.189-2.012,0.306-3.032,0.349c-0.984,0.042-1.968,0.118-2.953,0.09c-1.329-0.038-2.656-0.075-3.98-0.243
c-1.24-0.157-2.465-0.378-3.676-0.69c-0.077-0.02-0.158-0.017-0.237-0.024c-0.02-0.012-0.04-0.025-0.06-0.036
c-0.001,0-0.01,0.012-0.016,0.019C5.725,8.901,5.748,8.91,5.771,8.919c0.5,0.421,1.075,0.722,1.668,0.984
c1.595,0.704,3.239,1.262,4.941,1.646c1.062,0.244,2.135,0.414,3.219,0.527c0.932,0.098,1.862,0.119,2.794,0.088
c1.474-0.047,2.925-0.271,4.34-0.703c0.852-0.258,1.671-0.596,2.459-1.009c0.075-0.039,0.145-0.108,0.272-0.068
c-0.177,0.676-0.53,1.229-1.09,1.645c-0.697,0.518-1.512,0.742-2.347,0.879c-1.53,0.25-3.063,0.488-4.625,0.439
c-1.536-0.051-3.051-0.244-4.551-0.582c-2.268-0.512-4.471-1.207-6.549-2.258C5.37,10.035,4.575,9.386,4.072,8.439
C4.004,8.311,3.893,8.277,3.776,8.237c-0.682-0.233-1.36-0.473-1.975-0.858c-0.44-0.276-0.835-0.608-1.134-1.035
C0.098,5.531,0.153,4.713,0.78,3.95c0.434-0.527,0.99-0.884,1.58-1.197C3.815,1.98,5.367,1.5,6.988,1.222
c0.664-0.114,1.333-0.181,2.001-0.25c0.085-0.009,0.194-0.036,0.197,0.103C9.189,1.18,9.239,1.308,9.056,1.34
C8.611,1.417,8.167,1.5,7.727,1.598C6.339,1.909,5.018,2.383,3.83,3.187C3.383,3.49,2.978,3.841,2.74,4.332
C2.352,5.134,2.604,6.035,3.35,6.606c0.179,0.138,0.352,0.289,0.578,0.376C3.846,6.034,4.304,5.351,4.999,4.833
c1.103-0.82,2.358-1.211,3.742-1.149C8.81,3.688,8.885,3.678,8.956,3.756C8.788,3.938,8.563,4.038,8.354,4.151
c-0.594,0.321-1.2,0.622-1.761,0.998C6.238,5.386,5.914,5.651,5.7,6.045C5.514,6.389,5.539,6.711,5.761,6.989
C6.245,7.596,6.87,8.005,7.638,8.173c0.01,0.006,0.021,0.012,0.031,0.019c-0.006-0.01-0.013-0.02-0.02-0.03
C7.595,7.967,7.517,7.775,7.488,7.576C7.41,7.041,7.65,6.644,8.079,6.353c0.667-0.454,1.434-0.646,2.212-0.799
c0.132-0.025,0.267-0.098,0.427-0.028c-0.142,0.22-0.364,0.309-0.577,0.408C9.812,6.089,9.476,6.226,9.15,6.39
C8.456,6.737,8.354,7.718,9.145,8.235c0.557,0.365,1.174,0.54,1.807,0.673c1.125,0.24,2.267,0.332,3.412,0.263
c1.206-0.073,2.4-0.243,3.502-0.791c0.328-0.162,0.628-0.368,0.868-0.65c0.347-0.408,0.335-1.006-0.038-1.405
c-0.212-0.228-0.431-0.449-0.681-0.637c-0.064-0.048-0.178-0.101-0.142-0.2c0.031-0.085,0.142-0.041,0.217-0.042
c1.11-0.013,1.987,0.784,2.09,1.896c0.016,0.159-0.091,0.311-0.02,0.488c0.228-0.078,0.43-0.206,0.608-0.357
c0.357-0.303,0.718-0.602,0.938-1.037c0.261-0.518,0.111-0.946-0.239-1.342c-0.432-0.486-0.999-0.791-1.546-1.121
c-0.351-0.21-0.702-0.421-1.023-0.673c-0.136-0.106-0.287-0.208-0.339-0.415c0.464,0.062,0.905,0.15,1.338,0.267
c0.992,0.268,1.952,0.603,2.723,1.33c0.537,0.508,0.867,1.115,0.941,1.854c0.009,0.084,0.04,0.167,0.07,0.289
c0.663-0.666,1.279-1.307,1.21-2.32c-0.036-0.516-0.273-0.929-0.603-1.301c-0.784-0.884-1.82-1.372-2.878-1.824
c-0.54-0.23-1.102-0.391-1.667-0.549c-0.298-0.084-0.587-0.213-0.734-0.526C19.051,0.106,19.14,0.106,19.229,0.106z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#185FA3" d="M24.157,12.945c-0.057,1.15-0.831,1.861-1.917,2.16
c-0.568,0.154-1.151,0.207-1.736,0.213c-0.943,0.012-1.888,0.033-2.83-0.006c-2.44-0.102-4.865-0.311-7.188-1.156
c-1.499-0.545-2.85-1.32-3.934-2.511c-0.257-0.283-0.493-0.584-0.698-0.908c-0.035-0.057-0.115-0.115-0.057-0.186
c0.058-0.069,0.134-0.002,0.197,0.017c0.617,0.188,1.191,0.48,1.727,0.827c1.609,1.042,3.401,1.634,5.218,2.167
c1.03,0.303,2.079,0.525,3.141,0.674c0.966,0.137,1.941,0.225,2.919,0.172c1.143-0.064,2.274-0.221,3.359-0.617
c0.552-0.205,1.084-0.443,1.585-0.754C24.009,12.994,24.068,12.936,24.157,12.945z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#185FA3" d="M26.174,7.245c-0.12,0.666-0.389,1.239-0.838,1.73
c-0.529,0.579-1.197,0.945-1.915,1.217c-1.191,0.454-2.432,0.698-3.691,0.865c-1.208,0.159-2.419,0.235-3.636,0.202
c-1.16-0.031-2.317-0.111-3.472-0.249c-0.843-0.102-1.685-0.212-2.526-0.336c-0.025-0.004-0.049-0.016-0.074-0.025
c0-0.103,0.085-0.107,0.145-0.126c0.567-0.184,1.149-0.195,1.737-0.14c0.952,0.091,1.895,0.303,2.857,0.238
c1.281-0.086,2.561-0.173,3.835-0.35c1.127-0.157,2.233-0.391,3.313-0.746c1.456-0.479,2.793-1.184,3.999-2.133
C25.981,7.333,26.049,7.263,26.174,7.245z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#185FA3" d="M10.134,15.01c0.631-0.064,1.199,0.104,1.769,0.279
c0.907,0.277,1.768,0.697,2.698,0.902c0.889,0.191,1.784,0.238,2.693,0.164c0.582-0.049,1.166-0.1,1.75-0.117
c0.38-0.014,0.757-0.098,1.178-0.043c-0.252,0.338-0.582,0.555-0.925,0.74c-0.72,0.385-1.494,0.574-2.312,0.637
c-1.662,0.131-3.222-0.227-4.717-0.916C11.495,16.297,10.502,15.621,10.134,15.01z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#185FA3" d="M13.687,6.775c0.751,0.033,1.503,0.068,2.242,0.224
c0.226,0.047,0.446,0.121,0.641,0.252c0.387,0.257,0.395,0.602,0.019,0.875c-0.29,0.211-0.633,0.264-0.973,0.327
c-0.802,0.144-1.61,0.27-2.425,0.238c-0.732-0.029-1.474-0.071-2.112-0.514c-0.218-0.151-0.368-0.353-0.494-0.582
c-0.094-0.171-0.038-0.256,0.132-0.318c0.484-0.174,0.981-0.308,1.49-0.377C12.696,6.832,13.188,6.751,13.687,6.775z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#185FA3" d="M18.487,18.098c-0.565,0.688-1.267,1.033-2.055,1.203
c-1.318,0.285-2.605,0.158-3.795-0.484c-0.755-0.408-1.465-0.912-1.868-1.725c-0.081-0.162-0.107-0.33-0.124-0.525
c0.154,0.029,0.248,0.129,0.357,0.195c1.095,0.666,2.291,1.023,3.555,1.184c1.005,0.127,2.014,0.158,3.025,0.152
C17.866,18.096,18.148,18.098,18.487,18.098z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#185FA3" d="M16.455,19.816c-0.264,0.402-0.588,0.668-0.965,0.871
c-1.155,0.625-2.657,0.469-3.671-0.367c-0.301-0.248-0.607-0.492-0.824-0.826c-0.164-0.254-0.246-0.523-0.184-0.854
c0.306,0.172,0.591,0.35,0.888,0.496c0.725,0.365,1.507,0.523,2.308,0.559C14.803,19.729,15.601,19.756,16.455,19.816z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#185FA3" d="M13.933,21.641c-0.032,0.059-0.061,0.111-0.094,0.164
c-0.196,0.322-0.472,0.574-0.707,0.861c-0.255,0.313-0.492,0.629-0.54,1.049c-0.021,0.188-0.103,0.238-0.271,0.102
c-0.843-0.695-1.521-1.51-1.893-2.551c-0.022-0.063-0.096-0.131-0.028-0.193c0.052-0.049,0.119,0.008,0.172,0.027
c0.58,0.195,1.169,0.344,1.776,0.432c0.469,0.07,0.938,0.025,1.407,0.037C13.82,21.572,13.898,21.545,13.933,21.641z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#FEFEFE" d="M5.771,8.919C5.748,8.91,5.725,8.901,5.702,8.893
c0.005-0.007,0.014-0.019,0.016-0.019c0.021,0.011,0.04,0.024,0.06,0.036L5.771,8.919z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#FEFEFE" d="M7.649,8.162c0.006,0.01,0.013,0.02,0.02,0.03
C7.659,8.186,7.648,8.18,7.638,8.173L7.649,8.162z"/>
<path fill="#185FA3" d="M50.586,4.389c0,0.835-0.11,1.643-0.331,2.422c-0.221,0.779-0.535,1.504-0.945,2.173
c-0.409,0.669-0.898,1.272-1.464,1.808c-0.567,0.536-1.19,0.992-1.867,1.371c0.676,0.378,1.299,0.838,1.867,1.382
c0.566,0.544,1.055,1.151,1.464,1.819c0.41,0.67,0.724,1.391,0.945,2.162c0.221,0.772,0.331,1.575,0.331,2.41v1.087h-2.174v-1.087
c0-0.912-0.173-1.78-0.519-2.601c-0.348-0.817-0.824-1.526-1.43-2.125c-0.607-0.6-1.315-1.076-2.127-1.429
c-0.812-0.355-1.681-0.532-2.611-0.532H35.04v7.773h-2.15V3.326h2.15V11.1h6.687c0.93,0,1.799-0.177,2.611-0.532
c0.812-0.354,1.52-0.834,2.127-1.44c0.605-0.607,1.082-1.315,1.43-2.127c0.346-0.811,0.519-1.681,0.519-2.611V3.326h2.174V4.389z"/>
<path fill="#185FA3" d="M67.551,21.023V13.25H56.683v-2.174h10.774c-0.126-0.788-0.386-1.524-0.78-2.209
c-0.394-0.686-0.882-1.28-1.465-1.784c-0.583-0.504-1.244-0.897-1.984-1.182c-0.741-0.284-1.528-0.425-2.363-0.425
c-0.929,0-1.799,0.177-2.611,0.532c-0.811,0.354-1.52,0.831-2.126,1.429c-0.606,0.6-1.086,1.308-1.441,2.127
c-0.354,0.819-0.532,1.686-0.532,2.599v8.86h-2.15v-8.86c0-1.228,0.232-2.378,0.697-3.45c0.464-1.07,1.099-2.008,1.902-2.812
C55.407,5.099,56.344,4.464,57.415,4c1.071-0.465,2.221-0.697,3.45-0.697S63.243,3.535,64.314,4c1.07,0.465,2.008,1.099,2.812,1.902
c0.803,0.803,1.437,1.741,1.901,2.812c0.465,1.072,0.697,2.222,0.697,3.45v8.86H67.551z"/>
<path fill="#185FA3" d="M88.864,13.25H78.09c0.125,0.803,0.385,1.544,0.78,2.222c0.393,0.676,0.882,1.268,1.464,1.771
c0.583,0.505,1.244,0.902,1.984,1.194c0.74,0.29,1.527,0.438,2.364,0.438v2.148c-1.229,0-2.381-0.232-3.45-0.697
c-1.071-0.465-2.009-1.099-2.813-1.901c-0.803-0.803-1.437-1.739-1.902-2.813c-0.465-1.07-0.697-2.221-0.697-3.449v-1.087h10.774
c-0.125-0.788-0.385-1.524-0.779-2.209c-0.393-0.686-0.882-1.28-1.463-1.784c-0.585-0.504-1.247-0.897-1.986-1.182
c-0.741-0.284-1.527-0.425-2.363-0.425c-0.929,0-1.799,0.177-2.611,0.532c-0.812,0.354-1.521,0.831-2.127,1.429
c-0.605,0.6-1.086,1.308-1.44,2.127c-0.354,0.819-0.532,1.686-0.532,2.599v8.86h-2.15v-8.86c0-1.228,0.232-2.378,0.697-3.45
c0.464-1.07,1.098-2.008,1.901-2.812C74.546,5.099,75.482,4.464,76.554,4c1.071-0.465,2.221-0.697,3.45-0.697S82.382,3.535,83.453,4
s2.008,1.099,2.812,1.902c0.804,0.803,1.438,1.741,1.902,2.812c0.465,1.072,0.697,2.222,0.697,3.45V13.25z"/>
<path fill="#185FA3" d="M105.828,21.023V13.25H94.96v-2.174h10.774c-0.127-0.788-0.386-1.524-0.779-2.209
c-0.396-0.686-0.884-1.28-1.465-1.784c-0.584-0.504-1.245-0.897-1.985-1.182c-0.74-0.284-1.528-0.425-2.362-0.425
c-0.931,0-1.799,0.177-2.611,0.532c-0.811,0.354-1.521,0.831-2.126,1.429c-0.607,0.6-1.088,1.308-1.441,2.127
c-0.355,0.819-0.532,1.686-0.532,2.599v8.86h-2.149v-8.86c0-1.228,0.231-2.378,0.696-3.45c0.465-1.07,1.099-2.008,1.902-2.812
C93.684,5.099,94.62,4.464,95.692,4c1.07-0.465,2.221-0.697,3.45-0.697c1.229,0,2.379,0.232,3.449,0.697
c1.069,0.465,2.008,1.099,2.813,1.902c0.803,0.803,1.438,1.741,1.9,2.812c0.466,1.072,0.697,2.222,0.697,3.45v8.86H105.828z"/>
<path fill="#185FA3" d="M127.142,4.389c0,1.134-0.201,2.202-0.603,3.202c-0.402,1.001-0.954,1.894-1.654,2.682
c-0.702,0.788-1.524,1.434-2.47,1.937c-0.944,0.504-1.97,0.827-3.071,0.969v7.845h-2.149v-7.845
c-1.087-0.142-2.108-0.465-3.061-0.969c-0.953-0.503-1.775-1.149-2.469-1.937c-0.694-0.788-1.242-1.681-1.642-2.682
c-0.401-1-0.603-2.068-0.603-3.202V3.302h2.149v1.087c0,0.93,0.178,1.8,0.533,2.611c0.354,0.812,0.833,1.517,1.438,2.115
c0.607,0.599,1.314,1.075,2.128,1.43c0.813,0.354,1.682,0.531,2.611,0.531c0.914,0,1.779-0.177,2.598-0.531
c0.819-0.355,1.528-0.831,2.127-1.43c0.6-0.598,1.076-1.303,1.43-2.115c0.354-0.811,0.532-1.681,0.532-2.611V3.302h2.174V4.389z"/>
<path fill="#185FA3" d="M137.42,18.875c1.008-0.018,1.944-0.227,2.812-0.628c0.866-0.401,1.606-0.957,2.221-1.665l1.631,1.417
c-0.821,0.93-1.8,1.667-2.942,2.208c-1.142,0.544-2.382,0.816-3.721,0.816c-1.229,0-2.379-0.232-3.451-0.697
c-1.071-0.465-2.008-1.099-2.811-1.901c-0.804-0.803-1.437-1.739-1.903-2.813c-0.463-1.07-0.694-2.221-0.694-3.449
c0-1.228,0.231-2.378,0.694-3.45c0.467-1.07,1.1-2.008,1.903-2.812c0.803-0.803,1.739-1.437,2.811-1.902
c1.072-0.465,2.223-0.697,3.451-0.697c1.339,0,2.579,0.272,3.721,0.815c1.143,0.543,2.121,1.28,2.942,2.209l-1.631,1.441
c-0.614-0.708-1.354-1.268-2.221-1.677c-0.867-0.41-1.804-0.614-2.812-0.614c-0.835,0-1.625,0.141-2.365,0.425
c-0.739,0.284-1.399,0.678-1.983,1.182c-0.583,0.504-1.07,1.098-1.465,1.784c-0.394,0.685-0.662,1.421-0.803,2.209h10.798v2.174
h-10.798c0.141,0.803,0.409,1.544,0.803,2.222c0.395,0.676,0.882,1.268,1.465,1.771c0.584,0.505,1.244,0.902,1.983,1.194
C135.795,18.727,136.585,18.875,137.42,18.875z"/>
<path fill="#185FA3" d="M161,17.999c-0.818,0.93-1.797,1.667-2.931,2.208c-1.134,0.544-2.369,0.816-3.708,0.816
c-1.229,0-2.38-0.232-3.451-0.697c-1.072-0.465-2.01-1.099-2.812-1.901c-0.803-0.803-1.436-1.739-1.902-2.813
c-0.463-1.07-0.696-2.221-0.696-3.449V3.326h2.15v8.837c0,0.93,0.177,1.799,0.531,2.611c0.355,0.811,0.834,1.52,1.441,2.126
c0.606,0.606,1.314,1.087,2.127,1.44c0.811,0.355,1.681,0.534,2.611,0.534c1.007,0,1.94-0.206,2.798-0.615
c0.859-0.411,1.596-0.97,2.21-1.678L161,17.999z"/>
</svg>